javascript Angularjs 指令隔离范围 + 单向数据绑定不适用于对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33126555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs directives isolated scope + one-way data-binding not working for objects?
提问by murli2308
I have created a custom directive which has two values. first is config object and second is data object. I modify this config and data objects inside my directive which is reflecting it in parent scope. Which is causing me error when I have to use directive multiple times.
我创建了一个自定义指令，它有两个值。第一个是配置对象，第二个是数据对象。我在我的指令中修改了这个配置和数据对象，它在父作用域中反映了它。当我必须多次使用指令时，这会导致我出错。
I followed https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/and I am using isolated scope.
我关注了https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/并且我使用的是隔离范围。
I want one way data binding for objects in isolated scope. Whatever I change in directive function it should not reflect in the parent scope.
我想要一种对隔离范围内的对象进行数据绑定的方法。无论我在指令函数中更改什么，它都不应该反映在父作用域中。
below is scope of directive.
以下是指令的范围。
scope: {
config: "&config",
dataObj: "&dataObj"
}
here is how I access it in the link function of directive
这是我在指令的链接函数中访问它的方法
var config = scope.config();
var dataObj= scope.dataObj();
I am assuming that pass by reference is happening here.
我假设这里发生了引用传递。
I am adding JSbin. check the console the value of object is changing and reflecting in parent scope.
我正在添加 JSbin。检查控制台 object 的值正在更改并反映在父作用域中。
回答by Pavan Kumar Jorrigala
passing text is one-way binding(@)and passing object is two-way binding(=)
传递文本是one-way binding(@)，传递对象是two-way binding(=)
passing object as text
将对象作为文本传递
<custom-directive config="{{config}}"></custom-directive>
scope in directive
指令范围
scope: {
config: "@"
}
converting the string back to object in link
将字符串转换回链接中的对象
var config = angular.fromJson(scope.config);
回答by murli2308
You are correct, the issue is that your JavaScript objects are being passed by reference. Using a one-way binding copies the reference, but the reference will still point to the same object.
你是对的，问题是你的 JavaScript 对象是通过引用传递的。使用单向绑定复制引用，但引用仍将指向同一个对象。
My impression from the Angular docs for directiveshas always been:
我对指令的Angular 文档的印象一直是：
- The '@' binding is intended for interpolated strings
- The '=' binding is intended for structured data that should be shared between scopes
- The '&' binding is intended for repeatedly executing an expression that is bound to the parent scope
- '@' 绑定用于内插字符串
- '=' 绑定用于应该在范围之间共享的结构化数据
- '&' 绑定用于重复执行绑定到父作用域的表达式
If you want to treat the bound object from the parent as immutable, you can create a deep copy the objects inside your link code using angular.copy:
如果您想将来自父对象的绑定对象视为不可变对象，您可以使用angular.copy 为链接代码中的对象创建一个深层副本：
var config = angular.copy(scope.config());
var dataObj = angular.copy(scope.dataObj());
Alternatively, you can use a two-way binding for this and copy the object in the same way:
或者，您可以为此使用双向绑定并以相同方式复制对象：
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);
回答by prithveesingh zankat
The simplest thing would be to use the below statement inside the directive/component-
最简单的方法是在指令/组件中使用以下语句-
scope.config = angular.copy(scope.config);
