问题

我仔细阅读了AngularJS文档的主题,然后用指令加以修饰.这是小提琴.

以下是一些相关的片段:

  • From the HTML:

    <pane bi-title="title" title="{{title}}">{{text}}</pane>
    
  • From the pane directive:

    scope: { biTitle: '=', title: '@', bar: '=' },
    

有几件事情我不能得到:

  • Why do I have to use "{{title}}" with '@' and "title" with '='?
  • Can I also access the parent scope directly, without decorating my element with an attribute?
  • The documentation says "Often it's desirable to pass data from the isolated scope via an expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?

我发现另一个小提琴,也显示表达式解决方案: http://jsfiddle.net/maxisam/QrCXh/



解决方法

Why do I have to use "{{title}}" with '@' and "title" with '='?

@ 将本地/指示范围属性绑定到DOM属性的已评估值.如果使用 title = title1 title ="title1",DOM属性"title"的值只是字符串 title1 .如果使用 title ="{{title}}",DOM属性"title"的值是 {{title}} 的内插值,将无论父范围属性"title"当前设置为.由于属性值始终为字符串,因此在使用 @ 时,在指令的作用域中,此属性的字符串值将始终为字符串.

= 将本地/指令作用域属性绑定到父作用域属性.因此,使用 = ,您可以使用父模型/ scope属性名称作为DOM属性的值.您不能使用 = 来使用 {{}} .

使用@,您可以执行 title ="{{title}},然后插入一些" - {{title}}",然后字符串"and them some"用它.最后连接的字符串是local / directive scope属性获取的. (您不能使用 = ,只有 @ 来执行此操作.)

使用 @ ,您需要使用 attr.$ observe('title',function(value){...})值在链接(ing)函数中.例如, if(scope.title =="...")将无法像您预期的那样工作.请注意,这意味着您只能 异步访问此属性 / a> 如果只使用模板中的值,则不需要使用$ observe().例如 template:'&lt; div&gt; {{title}}&lt; / div&gt;'.

使用 = ,您不需要使用$ observe.

Can I also access the parent scope directly, without decorating my element with an attribute?

是,但前提是您不使用隔离范围.从您的指令

中删除此行

scope:{...}

,然后您的指令将不会创建一个新的作用域.它将使用父作用域.然后,您可以直接访问所有父作用域属性.

The documentation says "Often it's desirable to pass data from the isolated scope via an expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?

是的,双向绑定允许本地/指令作用域和父作用域共享数据. "表达式绑定"允许指令调用由DOM属性定义的表达式(或函数),您还可以将数据作为参数传递到表达式或函数.因此,如果您不需要与父级共享数据 - 您只需要调用父级作用域中定义的函数,您可以使用&amp; 语法.

另请参阅




相关问题推荐