AngularJS - ng-include ng-controller和范围不绑定

Question

我有以下主要观点

<div ng-include="'otions.html'"></div>

和options.html有以下内容

<div ng-controller="OptionsController">Options</div>
<input type="text" ng-model="keyword" value="{{keyword}}" />
<button ng-click="search()">Search</button>

但是“keyword”并未绑定到OptionsController中的范围。

app.controller('OptionsController', 
              ['$scope', function($scope) {

  $scope.keyword = "all";
  $scope.search = function() {
    console.log("hello")
  };

}]);

当我点击按钮时，我看不到hello ，关键字all都没有出现在输入文字中。

我尝试按如下方式移动ng控制器部分

<div ng-controller="OptionsController" ng-include="'otions.html'"></div>

事情按预期工作。

我仔细阅读了AngularJS中的答案- 使用ng-include时失去了范围 - 我认为我的问题是相关的，但只需要更多的解释来解决正在发生的事情。

Answer 1

您应该像这样编写options.html：

<div ng-controller="OptionsController">Options
<input type="text" ng-model="keyword" value="{{keyword}}" />
<button ng-click="search()">Search</button>
</div>

OptionsController应该放在外部html元素中。

Answer 2

我有同样的问题，

在主标签下它可以正常工作但是，当将一些数据绑定到nav.html时它不起作用。

找到这个链接

AngularJS - 使用ng-include时失去范围

里面包括其工作子范围。 更好的选择来创建自定义指令的简单解决方案