angularjs - Angular 指令中的单向绑定(bind)

Question

官方Angular documentation for compile讨论单向绑定(bind)类型< .

在 Angular 社区中，我看到了 @通常称为“单向绑定(bind)类型”。

是什么赋予了？ @在我看来，它不是真正的单向绑定(bind)，因为它只是评估表达式并设置一个字符串。 <似乎更类似于 =除了绑定(bind)只是单向的。

我的猜测是 <最近介绍了这将解释为什么 @曾经被称为单向绑定(bind)类型。 (有点像，但不完全是)

希望有更多 Angular 经验的人可以为我解决问题! :)

更新:@aaronmallen commented并确认 <最近添加了(Angular 1.5)。

为了进一步澄清事情，我什么时候应该使用 @对比 < ?

Answer 1

在 Angular 1.x 中有两种方法可以进行单向绑定(bind)，具体取决于您拥有的版本

<1.5

@binding 将来自父级的文字值绑定(bind)到隔离范围内。所以你可以这样做:

<cat name="Fluffy" age="12"></cat>

您可以将其视为一种方式绑定(bind)。因为您正在绑定(bind)文字，所以数据不会返回，因为没有任何东西可以分配给它。

在旧版本的 Angular (<1.5) 中，我们使用了 @加卷发 {{}}当我们想要一种方式绑定(bind)时。 curlies 在传输之前将表达式转换为文字，因此我们传入了文字:

<cat name="{{$ctrl.catName}}" age="{{$ctrl.catAge}}"></cat>

因为花括号表达式被评估为文字，然后作为文字传递给指令。数据无法再次恢复，因为 curl 已被评估为字符串，因此没有任何数据可以分配。

您仍然会在许多教程中发现此方法。它现在已经过时了，您应该避免使用它。

1.5 +

在 1.5 中，我们得到 <捆绑。这让我们可以在没有 curl 的情况下以一种方式绑定(bind)。我们现在可以这样做:

<cat name="$ctrl.catName" age="$ctrl.catAge"></cat>

不像 =绑定(bind)，如果隔离上的值发生更改，则更改不会反射(reflect)在父级中。效果是一样的，但语法要好得多。