Angularjs指令隔离范围+单向数据绑定不适用于对象？答案

【问题标题】：Angularjs directives isolated scope + one-way data-binding not working for objects?Angularjs指令隔离范围+单向数据绑定不适用于对象？
【发布时间】：2015-10-14 13:23:23
【问题描述】：

我创建了一个自定义指令，它有两个值。第一个是配置对象，第二个是数据对象。我在我的指令中修改了这个配置和数据对象，它反映在父范围中。当我必须多次使用指令时，这会导致我出错。

我关注了https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/，我正在使用隔离范围。

我想要一种对孤立范围内的对象进行数据绑定的方式。无论我在指令函数中进行什么更改，它都不应反映在父范围中。

以下是指令的范围。

scope: {
    config: "&config",
    dataObj: "&dataObj"
}

这是我如何在指令的链接函数中访问它

var config = scope.config();
var dataObj= scope.dataObj();

我假设这里发生了引用传递。

我正在添加 JSbin。检查控制台对象的值是否在更改并反映在父范围内。

https://jsbin.com/vagowe/edit?html,js,output

【问题讨论】：

那么具体是什么问题呢？请显示所有相关代码并创建一个复制问题的plunker 演示
@charlietfl 我已经添加了演示。希望你能理解我的问题
你必须使用=双向绑定将对象传递给指令。
@ThinkingMedia 我正在将对象传递给指令..然后我正在修改该对象..我不想反映父范围中的对象更改...两种方式数据绑定将反映对父范围的更改.这是我不想要的。我想要一种方式的对象数据绑定..
var x = angular.copy($scope.config);

标签： javascript angularjs data-binding angularjs-directive

【解决方案1】：

传递文本是one-way binding(@)，传递对象是two-way binding(=)

将对象作为文本传递

<custom-directive config="{{config}}"></custom-directive>

指令范围

scope: {
  config: "@"
}

将字符串转换回链接中的对象

var config = angular.fromJson(scope.config);

【讨论】：

它的工作很棒..所以我们在这里将对象作为字符串化对象传递，并在指令中将字符串解析为对象对吗？
true，而不是作为函数访问（&）可以访问父作用域对象（它是双向绑定的）。
这是解决此问题的正确且唯一的方法吗？
我认为这是更好的方法，因为没有办法操作父范围对象，如果你使用 = 或 & 总是有机会修改父范围对象
现在也有单向绑定scope: { config: '<' }

【解决方案2】：

你是对的，问题是你的 JavaScript 对象是通过引用传递的。使用单向绑定会复制引用，但引用仍将指向同一个对象。

我对@987654321@的印象一直是：

“@”绑定适用于插值字符串
“=”绑定适用于应在作用域之间共享的结构化数据
“&”绑定用于重复执行绑定到父作用域的表达式

如果您想将来自父级的绑定对象视为不可变对象，您可以使用 angular.copy 在链接代码中创建对象的深层复制：

var config = angular.copy(scope.config());
var dataObj = angular.copy(scope.dataObj());

或者，您可以为此使用双向绑定并以相同的方式复制对象：

scope: {
    config: "=",
    dataObj: "="
}

// ...
// Inside the link function of the directive.
// Note that scope.config and scope.dataObj are no longer functions!

var config = angular.copy(scope.config);
var dataObj = angular.copy(scope.dataObj);

【讨论】：

我在指令 CONTROLLER 中解决了 $scope.config = angular.copy($scope.config__); 问题。我认为更有意义，并且复制的数组仍然存在。
对于指令，我发现angular.copy() 比angular.fromJson() 更适合单向绑定。

【解决方案3】：

最简单的方法是在指令/组件中使用以下语句-

scope.config = angular.copy(scope.config);

【讨论】：