Angular指令中的单向绑定

Question

用于编译的官方Angular 文档讨论了单向绑定类型<.

在Angular 社区,我看到@通常被称为"单向绑定类型".

是什么赋予了？在@我看来,这不是真正的单向绑定,因为它只是评估表达式并设置字符串.本<似乎更类似于=与结合是单向的除外.

我的猜测是<最近引入的,这可以解释为什么@曾经被称为单向绑定类型.(它有点像,但并不完全)

希望有更多Angular经验的人可以为我做好准备!:)

更新:@aaronmallen评论并确认<最近添加了(Angular 1.5).

为了进一步澄清事情,我何时应该使用@vs <？

Answer 1

sup*_*ary 11

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

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

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

您可以将此视为一种绑定方式.因为您绑定了一个文字,所以数据不会返回,因为没有任何内容可以分配给它.

在较旧版本的Angular(<1.5)中,当我们想要单向绑定时,我们使用了@加上curlies {{}}.在运输之前,curlies将表达式转换为文字,所以我们传入了一个文字:

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

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

您仍会在许多教程中找到此方法.它现在已经过时了,你应该避免它.

在1.5我们得到了<约束力.这让我们在没有curlies的情况下单向绑定.我们现在可以这样做:

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

与=绑定不同,如果隔离值的值发生变化,则更改将不会反映在父级中.效果是一样的,但语法更好.

Answer 2

如果您不想重新评估价值，您可以在您的视图中使用一次性绑定：

<span>{{::foo}}</span>

但是要特别回答您的问题，Angular 1.5 中引入了 '<' 绑定，本质上意味着如果您将属性传递给指令，然后在控制器中更新它，它将不会在指令中更新。'@' 绑定专门用于传递字符串值，它不一定是单向绑定值。

资料来源：