具有隔离范围的 AngularJS 指令 - 默认属性值答案

【问题标题】：AngularJS directive with isolated scope - default attributes values具有隔离范围的 AngularJS 指令 - 默认属性值
【发布时间】：2015-03-31 10:35:40
【问题描述】：

我有一个独立范围的指令。在作用域中有一个属性 - 作为字符串 ('@') 传递。

此属性是可选的 - 如果指令属性中没有传递任何值，我想为该属性设置一些默认值。所以我写了下面这行代码：

scope.someProperty = scope.someProperty || "New Value";

但这并没有像我预期的那样工作......scope.someProperty 仍然是空的。

我进行了一些探索，并了解到绑定到隔离范围属性 (@) 的一种方式意味着可以读取父值但不能写入。我想做的是设置本地指令属性值而不是更改父级。

我该怎么做？

请参阅此plunker 中的示例。

【问题讨论】：

尝试 scope.someProperty = "新值";并在必要时覆盖它。由于 Angular 是两种方式绑定 scope.someProperty = scope.someProperty || “新价值”；会带来不必要的混乱。
隔离范围可防止不必要的混淆。 Angular 并不总是双向数据绑定——@ 是一种双向绑定

【解决方案1】：

看看这个plnkr

scope.someProperty = scope.someProperty || "New Value";

此分配会将someProperty 值设置为New Value。但是由于scope: {someProperty: '@'} 语句的初始摘要循环之后，角度将someProperty 值更新为相应的空属性值。

试试这个来提供默认值。

attrs.$observe('someProperty', function (nv, ov) {
  if (!nv) {
    scope.someProperty = "New Value";
  }
})

【讨论】：