Javascript 隔离作用域在angularjs中是如何工作的？

我在理解

范围：{}

时遇到问题。下面是我正在处理的代码示例。为什么它总是在控制台

中打印“强度”

，而不是在相应的数组值中打印

//代码在这里

var app = angular.module("superApp", []);

app.directive("superhero", function() {
    return {
        restrict: "E",

        controller: function($scope) {
        $scope.abilities = []

        this.addStrength = function() {
            $scope.abilities.push("strength")
        }

        this.addSpeed = function() {
            $scope.abilities.push("speed")
        }

        this.addFlight = function() {
            $scope.abilities.push("flight")
        }
    },

    link: function(scope, element) {
        element.addClass("button");
        element.bind("mouseenter", function() {
            console.log(scope.abilities);
        })
    }
  }
});

下面是整个工作代码。

它始终打印

“强度”

，而不考虑悬停。当我添加

作用域：{}

时，它会打印相应的值

我在这里不明白，

scope:{}

在这里有什么魔力？。什么是孤立的？我完全搞糊涂了。

这就是问题所在：

$scope.abilities = [];

如果没有隔离作用域，则每次实例化控制器时都会清除公共能力列表，并且每个指令都会实例化一次

查看不覆盖这些能力时会发生什么：。还是不好——它们堆积起来了。这就是为什么应该使用隔离作用域，以便不从父控制器继承任何作用域属性：

---

可能会帮助您更好地理解隔离作用域以及（您将看到视频示例与您的非常类似）。

如果没有

作用域：{}

，您的所有指令都共享相同的作用域，这意味着共享相同的

作用域.能力

，因此，您的上一个指令

strength

初始化

scope.abilityes=[]

，并且只推入“strength”

使用

scope:{}

，每次

superhero

都会加载一个隔离的scope和隔离的

scope.abilities

，因此它总是使用三个元素保持初始化

---

您可以在指令中

console.log（scope.$id）

检查差异。

隔离作用域-

scope:{}

隔离外部作用域和内部作用域，从某种意义上说，您的指令只能访问显式传递给它的别名变量。在So中直接阅读，没有作用域：{}，superhero指令与具有相同作用域的其他指令共享三次，而作用域：{}，superhero指令与具有单个作用域的其他指令共享三次。确切地说，更具体地说，“share”表示您在当前指令中“需要”某些其他指令。