父作用域

{{ name }}-{{ age }}

自定义指令


  1. 默认 (scope: false) - directive使用原有作用域,所以也不存在原型继承,这种方式很简单,但也很容易出问题——除非该directive与html不存在数据绑定,否则一般情况建议使用第2条方式。
  2. scope: true - directive创建一个子作用域, 并且会从父作用域进行原型继承。 如果同一个DOM element存在多个directives要求创建子作用域,那么只有一个子作用域被创建,directives共用该子作用域。
  3. scope: { ... } - directive创建一个独立的“Isolate”作用域,没有原型继承。这是创建可复用directive组件的最佳选择。因为它不会直接访问/修改父作用域的属性,不会产生意外的副作用。这种directive与父作用域进行数据通信有如下四种方式(更详细的内容请参考Developer Guide):

    1. = or =attr “Isolate”作用域的属性与父作用域的属性进行双向绑定,任何一方的修改均影响到对方,这是最常用的方式;
    2. @ or @attr “Isolate”作用域的属性与父作用域的属性进行单向绑定,即“Isolate”作用域只能读取父作用域的值,并且该值永远的String类型
    3. & or &attr “Isolate”作用域把父作用域的属性包装成一个函数,从而以函数的方式读写父作用域的属性,包装方法是$parse,详情请见API-$parse

    “Isolate”作用域的__proto__是一个标准Scope object (the picture below needs to be updated to show an orange 'Scope' object instead of an 'Object'). “Isolate”作用域的$parent同样指向父作用域。它虽然没有原型继承,但它仍然是一个子作用域。

    如下directive:

     <my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2"> 

    scope:

     scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }

    link函数中:

     scope.someIsolateProp = "I'm isolated"

    isolate scope

    请注意,我们在link函数中使用attrs.$observe('interpolated', function(value) { ... }来监测@属性的变化。

    更多请参考: http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

  4. transclude: true - directive新建一个“transcluded”子作用域,并且会从父作用域进行原型继承。需要注意的是,“transcluded”作用域与“Isolate”作用域是相邻的关系(如果“Isolate”作用域存在的话) -- 他们的$parent属性指向同一个父作用域。“Isolate”作用域的$$nextSibling指向“transcluded”作用域。

    更多请参考: AngularJS two way binding not working in directive with transcluded scope

    transcluded scope

    demo: fiddle