隔離范圍如何在angularjs中工作？

Question

我在理解scope : {}遇到問題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);
        })
    }
  }
});

以下是entire working code 。 http://plnkr.co/edit/jv2xZRvx4X8IcjKKkiXU?p=preview

無論懸停如何，它總是打印"strength" 。 我添加scope: {}的那一刻，它會打印出相應的值。

我不是在這里理解， scope: {}是什么scope: {}在這里做了什么？ 這里有什么孤立的 ？ 我在這里完全糊塗了。

Answer 1

這就是問題：

$scope.abilities = [];

如果沒有隔離范圍，每次實例化控制器時都會清除公共異能列表 - 並且每個指令都會實例化一次。

看看當你沒有覆蓋能力時會發生什么： http ： //plnkr.co/edit/5MJSXYogsuoVAbyQTiA5？p = preview 。 仍然不好 - 他們堆積如山。 這就是為什么應該使用隔離范圍，以便不從父控制器繼承范圍屬性 ： http ： //plnkr.co/edit/2zh5923hS6MRM2jczIKv？p = preview

此視頻可能會幫助您更好地了解隔離范圍以及官方文檔 （您將看到視頻示例與您的非常相似）。

Answer 2

沒有scope: {} ，所有指令都共享相同的范圍，這意味着共享相同的scope.abilities ，所以你的最后一個指令strength初始化scope.abilityes = []並且只推入'strength'。

使用scope: {} ，每次superhero加載一個隔離的作用域和隔離的scope.abilities ，所以它始終保持初始化的三個元素。

您可以在指令中使用console.log(scope.$id)來檢查差異。