困惑的CSS选择器触发控制器

时间:2014-01-08 00:57:52

标签: angularjs dart angular-dart

我无法理解如何使用属性选择器来限制控制器的范围。这是最小的控制器代码:

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>之外。有什么想法吗?

2 个答案:

答案 0 :(得分:5)

问题是您使用NgDirective而不是NgControllerNgDirective不会创建自己的范围,从而导致泄漏。切换到NgController可以解决问题。

答案 1 :(得分:1)

我认为问题在于@NgDirective没有创建自己的范围......

尝试@NgComponent并移动你的:
    “在我的控制器内部:{{ctrl.foo}}”
进入其模板属性。