Angularjs ng包括控制器范围

Angularjs ng包括控制器范围,angularjs,angularjs-scope,Angularjs,Angularjs Scope,我在AngularJs中遇到了一个问题,使用ng include包含一个有自己控制器的html模板 简而言之,问题是我能够在模板本身中访问包含模板的控制器中定义的范围变量,但不能做相反的事情(访问其控制器中的模板中定义的模型) 这是我的index.html页面,其中包括test.html模板: <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angul

我在AngularJs中遇到了一个问题,使用ng include包含一个有自己控制器的html模板

简而言之,问题是我能够在模板本身中访问包含模板的控制器中定义的范围变量,但不能做相反的事情(访问其控制器中的模板中定义的模型)

这是我的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>
<div>
{{foo}}
<br />
<input type="text" ng-model="username" />{{username}}
<br />
<button ng-click="go()">Click here</button>
</div>
毫无疑问,我可以做到以下几点:

  • 访问模板中控制器中定义的foo
  • 访问模板中模板中定义的用户名 本身
但我不能做到以下几点

  • 访问控制器中模板中定义的用户名 (go()函数中未定义输出)
这是一本书


提前感谢。

好的,我建议您为控制器添加别名,并在其范围内插入模型

将控制器别名为:


它是因为
ng include
指令总是在包含时创建新的范围

而不是在中声明控制器

test.html
本身中声明它

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

{{foo}}
{{username}}
点击这里

希望这有帮助

可能的副本我已经读过了,我认为我的情况不同。我确实尝试使用info.username作为模型的名称,但也不起作用。创建新范围有什么问题?我的意思是,为什么我要面对上述问题(访问视图中的作用域,但反之亦然),因为
ng include
创建了一个新的子作用域,该子作用域继承自TestController作用域或其父作用域,而父作用域无法访问该子作用域。啊,我明白了!首先
ng controller
runs(),创建一个新范围,然后
ng include
runs(),创建另一个子范围。控制器只能访问父作用域。明亮的
<div ng-controller="TestController as testCtrl" ng-include="'test.html'"></div>
<input type="text" ng-model="testCtrl.username" />{{testCtrl.username}}
$scope.testCtrl.username
<div ng-controller="TestController">
 {{foo}} <br />
 <input type="text" ng-model="username"/>    {{username}}     <br />
 <button ng-click="go()">Click here</button>
</div>