javascript - AngularJS - ng-include ng-controller 和范围不绑定(bind)

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>

但是“关键字”没有绑定(bind)到 OptionsController 中的范围。

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

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

}]);

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

我尝试如下移动 ng-controller 部分

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

一切都按预期进行。

我通读了 AngularJS - losing scope when using 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 元素中。