angular中使用ng-include后controller中$watch失去作用

文章目錄

1. 1. 问题简化
2. 2. 原因
3. 3. 解决办法
4. 4. 参考文献

有的时候为了实现代码复用，我们会使用ng-include复用部分代码。

问题简化

about.js

angular.module('angularTestApp')
  .controller('AboutCtrl', function ($scope) {
      $scope.num = 0;
      $scope.$watch("num", function () {
          console.log($scope.num);
      });
  });

about.html

<p>This is the about view.</p>
<div ng-include="'views/include.html'"></div>
{{num}}

include.html

<div>
  <input type="text" ng-model="num">
  <p>{{ num }}
</div>

如果我们运行这段代码就会发现一个问题，当我们改变num的值的时候控制台并没有打印num的值。

原因

这是因为我们使用ng-include的时候会会创建一个child scope。然后两个scope的作用域是相互隔离的，所以include.html中的ng-model绑定的是自己的scope, 所以about.js中的num不会发生改变。

解决办法

将include.html做如下修改

<div>
  <input type="text" ng-model="$parent.num">
  <p>{{ num }}
</div>

参考文献

ng-model not working inside ng-include