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

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

无论悬停如何，它始终会打印"strength"。我添加scope: {}的那一刻，它会打印出相应的值。

我不在这里理解，scope: {}在这里做什么魔法？什么是孤立？我在这里完全糊涂了。

Answer 1

这是问题所在：

$scope.abilities = [];

如果没有隔离范围，每次实例化控制器时都要清除公共异能列表 - 并且每个指令都会实例化一次。

看看当你没有覆盖这些能力时会发生什么：http://plnkr.co/edit/5MJSXYogsuoVAbyQTiA5?p=preview。仍然不好 - 他们堆积如山。这就是为什么应该使用隔离范围的原因，以便没有从父控制器继承范围属性：http://plnkr.co/edit/2zh5923hS6MRM2jczIKv?p=preview

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

Answer 2

如果没有scope: {}，您的所有指令都会共享相同的范围，这意味着共享相同的scope.abilities，因此您的上一个指令strength初始化scope.abilityes = []并且只推送＆＃ 39;强度＆＃39;英寸

使用scope: {}时，每次superhero加载隔离范围并隔离scope.abilities时，它始终会使用三个元素进行初始化。

您可以console.log(scope.$id)指令检查差异。

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

2 个答案: