ng-include 控制器范围答案

【问题标题】：ng-include controller scopeng-include 控制器范围
【发布时间】：2015-05-20 00:14:44
【问题描述】：

当我使用 ng-include 包含一个拥有自己的控制器的 html 模板时，我在 AngularJs 中遇到了问题。

简而言之，问题是我可以在模板本身中访问在包含模板的控制器中定义的范围变量，但不能做相反的事情（访问在其控制器内的模板中定义的模型）。

这是我包含 test.html 模板的 index.html 页面：

<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="app.js"></script>

  <body>
    <div ng-controller="TestController" ng-include="'test.html'"></div>
  </body>
</html>

这里是 test.html 模板：

<div>
{{foo}}
<br />
<input type="text" ng-model="username" />{{username}}
<br />
<button ng-click="go()">Click here</button>
</div>

最后这是我的控制器：

myApp.controller('TestController', function($scope) {
  $scope.foo = 'Hello World';
  $scope.go = function() {
    console.log('Username = ' + $scope.username);
  }
});

没有问题，我可以做到以下几点：

访问模板中控制器中定义的 foo
访问模板中定义的用户名本身

但我不能执行以下操作

访问控制器模板中定义的用户名（输出在 go() 函数中未定义）

这是plunker。

提前致谢。

【问题讨论】：

AngularJS: dot in ng-model的可能重复
我已经读过这篇文章，我认为我的情况有所不同。我确实尝试使用 info.username 作为模型的名称，但它也不起作用。

标签： angularjs angularjs-scope

【解决方案1】：

这是因为ng-include 指令总是在被包含时创建新范围，

而不是在

中声明你的控制器

<div ng-controller="TestController" ng-include="'test.html'"></div>

在test.html 本身中声明它，

<div ng-controller="TestController">
 {{foo}} <br />
 <input type="text" ng-model="username"/>    {{username}}     <br />
 <button ng-click="go()">Click here</button>
</div>

希望这会有所帮助！

【讨论】：

创建新范围有什么问题？我的意思是为什么我会遇到上述问题（访问视图中的范围但反之不行）
这是因为ng-include创建了一个新的子作用域，它继承自TestController作用域或其父作用域，而这个子作用域不能被父作用域访问。
啊，我明白了！首先 ng-controller 运行 (priority 500)，创建一个新范围，然后 ng-include 运行 (priority 400)，创建另一个子范围。并且控制器只能访问父范围。太棒了！

【解决方案2】：

好的，我建议你做的是给你的控制器起别名并将模型插入到它的范围内。

您的控制器的别名：

<div ng-controller="TestController as testCtrl" ng-include="'test.html'"></div>

实际上，此代码允许您使用 testCtrl 为变量添加前缀并将它们插入您的范围。

在控制器范围内插入模型：
所以现在你可以将你的模型插入到作用域中了。

<input type="text" ng-model="testCtrl.username" />{{testCtrl.username}}

所以现在在您的控制器中，您可以像这样访问该变量：

$scope.testCtrl.username

【讨论】：