javascript 同一指令的多个角度实例,范围不是孤立的
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20500731/
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
Angular multiple instances of same directive, scope is not isolated
提问by marebine
I have a problem when creating multiple directives with isolated scope: when I change something in 1st directive it also makes changes in all other directives.
我在创建具有独立作用域的多个指令时遇到问题:当我在第一个指令中更改某些内容时,它也会对所有其他指令进行更改。
Here is a working example: http://plnkr.co/edit/drBghqHHx2qz20fT91mi?p=preview(try to add more of Type1 'Available notifications' - a change in 1st will reflect in all other directives of Type1)
这是一个工作示例:http: //plnkr.co/edit/drBghqHHx2qz20fT91mi?p=preview(尝试添加更多的 Type1“可用通知”-第 1 项中的更改将反映在 Type1 的所有其他指令中)
I found some solutions to similar problems here but they don't work in my case. Also found a working solution with mapping 'subscription' data to local scope variables in directive (app.js, line 76) but I think there should be a more general way to do this right?
我在这里找到了一些类似问题的解决方案,但它们在我的情况下不起作用。还找到了一个有效的解决方案,将“订阅”数据映射到指令(app.js,第 76 行)中的局部范围变量,但我认为应该有更通用的方法来做到这一点,对吗?
回答by Vinny
In your directive 'notificationitem' you have the following code, keep it in mind as i explan:
在您的指令“notificationitem”中,您有以下代码,请在我解释时记住它:
// if all variables are mapped in this way than works
//$scope.enabled = $scope.subscription.enabled;
The reason why all of the 'isolated' scopes are updating is because of this code in your scope declaration in the same directive (notificationitem):
所有“隔离”范围都在更新的原因是因为在同一指令(notificationitem)中的范围声明中有此代码:
scope: {
subscription: '=',
index: '@'
},
The equal sign on subscription is angular's way of saying "Whenever the current scope updates, go to the parent and update that value as well." This means whenever you update your 'isolated' scope, it updates the parent scope as well. Since all of these isolated scopes are binding to the parent, they will change as well.
订阅上的等号是 angular 的说法“每当当前范围更新时,转到父级并更新该值。” 这意味着每当您更新“隔离”范围时,它也会更新父范围。由于所有这些隔离作用域都绑定到父作用域,它们也会发生变化。
Since you want the subscription.value to be the default value of that text field, you will need to do exactly what your commented code is doing:
由于您希望 subscription.value 成为该文本字段的默认值,因此您需要完全按照注释代码执行的操作:
scope.value = scope.subscription.value;
This will create an isolated value inside of the isolated scope.When scope.value changes, scope.subscription.value will not. All of the text fields now have their own 'value' to keep track of.
这将在隔离范围内创建一个隔离值。当 scope.value 改变时,scope.subscription.value 不会。所有的文本字段现在都有自己的“值”来跟踪。
Check out this article for information on directive bindings: http://www.ng-newsletter.com/posts/directives.html
查看这篇文章以获取有关指令绑定的信息:http: //www.ng-newsletter.com/posts/directives.html
Also, another way to get the default value would be to inject your service into the directive, if you don't like the above solution. Hope this all helps.
此外,如果您不喜欢上述解决方案,另一种获取默认值的方法是将您的服务注入到指令中。希望这一切都有帮助。