指令范围双向绑定不能使用“=”

时间:2014-05-25 10:43:35

标签: angularjs angularjs-directive angularjs-scope

我有这个非常简单的指令。

you can find the code here

在代码中,

我用过' @'用于范围中的链接。 我能够正确地得到它。

但这不是双向约束,所以我尝试用" ="在适用范围。

这部分似乎没有反映在我的模板中。我试着看看链接变量 它存在于范围内,似乎未定义。

该指令应该放在控制器内吗?

我的代码中缺少的是什么。

2 个答案:

答案 0 :(得分:2)

您似乎错过了@=绑定之间的差异。虽然2 可能看起来类似,但这些是将“指示世界”与“页面世界”联系起来的根本不同方式。

首先,让我们从相似之处开始:两种类型的绑定都允许您将数据从使用指令的页面传递给指令本身(指令内容范围)。但这就是相似之处的结束,差异列表如下:

  • =是双向数据绑定,可以通过两种方式跨越页面/指令世界:从页面到指令,从指令范围到页面范围。另一方面,@只允许您将数据从页面传递到指令,而不是从指令传​​递到页面。
  • =绑定允许您传递在作用域上定义的数据 - 即任何JavaScript变量(基元,数组,对象)。 @不同,它通过DOM属性传递数据。因此,这些属性仅限于字符串。
  • 鉴于上述情况,=@的触发方式与使用指令的网页不同:对于=,我们需要传递指向的{em>表达式范围上定义的数据 与@一起使用时,我们需要使用插值指令({{foo}})来访问范围内可用的数据。

在所有这些解释之后,你可以看到在指令定义中使用=我们需要传递一个表达式,所以如果你这样做:<mydirective link="link1" group="main"></mydirective>你实际上是在说:向指令传递在作用域上定义的link1变量的值。由于未定义此类变量,因此您将undefined传递给指令。

所以,如果你打算传递一个常量(我假设你想做),你需要写:

<mydirective link="'link1'"  group="main"></mydirective>

这是一个有效的插件:http://plnkr.co/edit/M3qL4MdmoWjTWzZGkwz0?p=preview

答案 1 :(得分:-1)

大多数人忘记的一件事是,您不能仅使用对象表示法声明隔离范围,并期望绑定父范围属性。这些绑定仅在声明了绑定“魔法”工作的属性时才有效。有关更多信息,请参阅:

https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/