javascript - 同一指令的 Angular 多个实例，范围不是孤立的

Question

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

这是一个工作示例:http://plnkr.co/edit/drBghqHHx2qz20fT91mi?p=preview(尝试添加更多 Type1 的“可用通知”——第 1 个中的更改将反射(reflect)在 Type1 的所有其他指令中)

我在这里找到了类似问题的一些解决方案，但它们不适用于我的情况。还找到了将“订阅”数据映射到指令(app.js，第 76 行)中的本地范围变量的工作解决方案，但我认为应该有更通用的方法来正确执行此操作？

Answer 1

在你的指令'notificationitem'中你有以下代码，在我解释的时候记住它:

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

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

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

订阅上的等号是 Angular 的表达方式，“每当当前范围更新时，转到父级并更新该值。”这意味着每当您更新“隔离”范围时，它也会更新父范围。 由于所有这些独立作用域都绑定(bind)到父级，因此它们也会发生变化。

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

scope.value = scope.subscription.value;

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

查看这篇文章以获取有关指令绑定(bind)的信息:http://www.ng-newsletter.com/posts/directives.html

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