javascript - 隔离范围如何在angularjs中工作？

Question

我在理解 scope : {} 时遇到问题。下面是我正在处理的代码示例。为什么它总是在控制台打印 "strength" 而不是它对应的数组值。

//代码在这里

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);
        })
    }
  }
});

下面是完整的工作代码。 http://plnkr.co/edit/jv2xZRvx4X8IcjKKkiXU?p=preview

它总是打印 "strength"，无论悬停如何。当我添加 scope:{} 时，它会打印出相应的值。

我在这里不明白，scope:{} 在这里发挥什么作用？。这里隔离的是什么？我在这里完全困惑。

Answer 1

问题是:

$scope.abilities = [];

如果没有隔离作用域，每次实例化 Controller 时都会清除通用能力列表 - 并且它会为每个指令实例化一次。

看看当你不覆盖能力时会发生什么:http://plnkr.co/edit/5MJSXYogsuoVAbyQTiA5?p=preview .仍然不好 - 他们堆积起来。这就是应该使用隔离作用域的原因，这样就不会从父 Controller 继承任何作用域属性:http://plnkr.co/edit/2zh5923hS6MRM2jczIKv?p=preview

This video可能会帮助您更好地理解隔离范围以及 official docs (您会看到视频示例与您的非常相似)。