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-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元素中。

Answer 2

我面对同样的问题，

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

找到此链接

AngularJS - losing scope when using ng-include

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

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

2 个答案: