Question

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

问题很简单，我能够访问模板本身所包含模板的控制器中定义的范围变量，但不能反过来（访问其控制器内模板中定义的模型）。

这是我的index.html页面，其中包含test.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。

提前致谢。

Answer 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>

希望这有帮助！

Answer 2

好的我建议你做的是别名你的控制器和inser模型的范围。

别名你的控制器：

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

实际上，此代码允许您使用testCtrl为变量添加前缀，并将其置于您的范围内。

Inser控制器范围内的模型：
所以现在你可以在范围内插入你的模型了。

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

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

$scope.testCtrl.username

ng-include控制器范围

2 个答案: