正确使用&在指令中绑定

时间:2015-03-11 03:57:13

标签: angularjs angularjs-directive

我在answersgenerated some discussion找到了这个问题,我想弄清楚我是否会离开基地,或者是否有一个"更多角"实现目标的方法。

当我编写一个将要使用隔离范围的指令时,出现的问题总是=,&或者@。

一般来说,人们总是会想到&作为将函数传递给指令的方法。 documentation将其描述为:

  

一种在上下文中执行表达式的方法   父范围。如果未指定attr名称,则为属性名称   假定与本地名称相同。给定范围的小部件定义:{   localFn:'&安培; myAttr'然后隔离范围属性localFn将指向   count = count + value表达式的函数包装器。经常   希望通过表达式从隔离范围传递数据   在父范围内,可以通过传递本地地图来完成   变量名和值到表达式包装器fn中。例如,   如果表达式是增量(金额),那么我们可以指定金额   通过将localFn调用为localFn({amount:22})来获取值。

我用它来传递函数很多,但我也想在传递一个返回非字符串的表达式的情况下使用它,我不希望我的指令能够修改值在父范围内。换句话说,我用它作为:

  

在父作用域

的上下文中执行表达式的方法

因此,如果我不需要双向绑定,并且表达式不是字符串,我会这样做:

.directive('displayObject', function() {

    scope: {
        value: '&=displayObject'
    },
    template: '<div ng-repeat="(k, v) in value()">{{k}}: {{v}}</div>',
    replace: true,
    ...
});

指令用法是:

<div displayObject="someScopePropertyOrExpression"></div>

=这里并不理想,因为我不需要双向绑定。我不希望我的指令修改父作用域中的值,我不希望手表需要维护它。

@ isn是理想的,因为它会插入属性,因此值总是一个字符串。

:: someScopePropertyOrExpression不起作用,因为我希望指令模板反映someScopePropertyOrExpression中的更改(如果它发生更改)。

在每次讨论中,总是提出

ng-repeat="(key, value) in value()"

设置一个手表 - 问题是=和模板一起设置两个 - 一个完全没必要的。

有几次,当我提出这种模式时,它被称为&#34; hack&#34;或者误用&amp;,甚至&#34;丑陋&#34;。< / p>

我不认为这是其中任何一种,但如果是,那么我的具体问题是替代方案是什么?

1 个答案:

答案 0 :(得分:0)

我在discussion here中搜索了很多以证明你错了,但我认为你是对的 - 这是设置单向(从父级到隔离范围)绑定的唯一方法一个实际的模型。

在这方面,"&"优于"=",因为正如您所指出的那样,"="会在父级的范围内设置监视,而"&"则不会。{/ {} p>

有一件事 - plunker 1 - (我最终设法揭开)暗示它是一个黑客攻击的是它与Angular的一次性绑定foo="::name"不相称:

"="将遵守一次性绑定(它会在父级上设置监视并在下一个摘要之前将其删除),而"&"则不会:

<input ng-model="name">
<div two-way="::name">
<div one-way="::name">

另一件事 - plunker 2 - 是"&"允许传递局部变量,它们可能会影响外部变量:

<input ng-model="name">
<div one-way="name">

但是在指令中,如果您执行了类似:"{{oneWay({name: 'fooo'})}}"的操作,则会使其显示"fooo",而不是从外部范围获取name的值。 这有点像用脚射击自己,是的,但它确实暗示这种用法可能略微偏离其原始意图。