我无法理解如何使用属性选择器来限制控制器的范围。这是最小的控制器代码:
import 'package:angular/angular.dart';
@NgDirective(
selector: '[my-controller]',
publishAs: 'ctrl'
)
class MyController {
String foo = 'fooooooooooooo';
}
main() {
ngBootstrap(module: new Module()
..type(MyController));
}
以下是使用该控制器的视图:
<!DOCTYPE html>
<html>
<body>
<div>
<!-- DOES NOT WORK. MAKES SENSE. -->
<p>Outside ng-app: {{ctrl.foo}}</p>
</div>
<div ng-app>
<div my-controller>
<!-- WORKS. MAKES SENSE -->
<p>Inside my-controller div: {{ctrl.foo}}</p>
</div>
<!-- WORKS. WHY? It is outside the div with the my-controller attribute -->
-->
<p>Outside my-controller div: {{ctrl.foo}}</p>
</div>
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
可以预见,{{ctrl.foo}}
代码在ng-app
元素之外不起作用。同样可以预见,{{ctrl.foo}}
在<div my-controller>
内部有效。但我不明白为什么它在 <div my-controller>
之外。有什么想法吗?
答案 0 :(得分:5)
问题是您使用NgDirective
而不是NgController
。 NgDirective
不会创建自己的范围,从而导致泄漏。切换到NgController
可以解决问题。
答案 1 :(得分:1)
我认为问题在于@NgDirective没有创建自己的范围......
尝试@NgComponent并移动你的:
“在我的控制器内部:{{ctrl.foo}}”
进入其模板属性。