相同指令的角度多个实例,范围不是孤立的

时间:2013-12-10 17:06:24

标签: javascript angularjs angularjs-directive

在创建具有隔离范围的多个指令时遇到问题:当我在1st指令中更改某些内容时,它也会在所有其他指令中进行更改。

以下是一个工作示例:http://plnkr.co/edit/drBghqHHx2qz20fT91mi?p=preview (尝试添加更多Type1'可用通知' - 1st中的更改将反映在Type1的所有其他指令中)

我在这里找到了类似问题的一些解决方案,但它们在我的情况下不起作用。还找到了一个工作解决方案,将'订阅'数据映射到指令(app.js,第76行)中的局部范围变量,但我认为应该有更通用的方法来做到这一点吗?

1 个答案:

答案 0 :(得分:7)

在您的指令'notificationitem'中,您有以下代码,请按照我的说明记住:

// if all variables are mapped in this way than works
//$scope.enabled = $scope.subscription.enabled;

所有“隔离”范围都在更新的原因是因为同一指令(notificationitem)中范围声明中的此代码:

scope: {
      subscription: '=',
      index: '@'
    },

订阅上的等号是angular的说法“每当当前范围更新时,转到父级并更新该值。”这意味着无论何时更新“隔离”范围,它都会更新父范围。 由于所有这些孤立的范围都与父母绑定,因此它们也会发生变化。

由于您希望subscription.value成为该文本字段的默认值,因此您需要完全按照注释的代码执行操作:

scope.value = scope.subscription.value;

这将在隔离范围内创建一个隔离值。当scope.value更改时,scope.subscription.value不会。所有文本字段现在都有自己的'值'来跟踪。

查看本文以获取有关指令绑定的信息:http://www.ng-newsletter.com/posts/directives.html

另外,获取默认值的另一种方法是将服务注入指令,如果您不喜欢上述解决方案。希望这一切都有所帮助。