在Angular Dart组件的构造函数中为键和值分配键和值

时间:2014-01-12 21:21:14

标签: angularjs dart angular-dart

考虑这个死亡简单的Angular Dart组件:

import 'package:angular/angular.dart';

@NgComponent(
    selector: 'el',
    templateUrl: './component.html',
    publishAs: 'ctrl',
    map: const {
      'foo': '@foo'
    }
)
class MyElement {
  String foo;

  MyElement(Scope scope) {
    scope['bar'] = 'bar';
  }
}

foo字段作为属性传递,bar'字段'添加到构造函数中的scope

这允许在视图中使用以下内容:

<div>{{ctrl.foo}}</div>
<div>{{bar}}</div>

foo需要以ctrl开头,但bar不需要。将一个字段直接添加到范围中似乎在这个特定示例中是一个糟糕的模式,但是有一个常见的用例来访问组件构造函数中的scope对象并在其中定义值吗?

1 个答案:

答案 0 :(得分:4)

简短的回答是'不'。实际上,组件不需要直接访问Scope对象。

这是对AngularJS(1.0,1.2)语法的改进。在AngularDart中,从组件设置显式$watch以及设置范围属性大多已过时。

  • AngularDart使用publishAs注释来设置范围的属性(以ctrl为前缀),而不是设置范围属性。
  • 组件定义了元素属性和类成员之间的映射,而不是监视。

在编写指令时,访问Scope仍然很有用。例如ng-repeat将使用Scope对象创建子范围并设置$index属性。