javascript - 为什么这个 Angular 模型没有被完全覆盖？

Question

我遇到了一个奇怪的问题，即在指令中设置了新属性后，模型没有被完全覆盖。

HTML:

<div ng-app="app">
    <div ng-controller="Dashboard">
        <div ng-repeat="item in items" my-dir items="items"></div>
        <button ng-click="replaceItems()">Replace</button>
    </div>
</div>

JS:

angular.module('app', []).controller('Dashboard', function($scope) {

    $scope.items = [{foo: "bar"}];

    console.log($scope.items);

    $scope.replaceItems = function () {
        $scope.items = [{}];

        console.log($scope.items);

    }

}).directive('myDir', function($injector) {
    return {
        scope: {
            items: '='
        },
        link: function(scope) {
            scope.items.newThing = 'I am new';
        }
    };
});

http://jsfiddle.net/Tgzdt/

尝试单击“替换”并检查控制台。

为什么即使 $scope.items 被空白数组和对象覆盖，newThing 仍然存在？

Answer 1

当 items 改变时，该指令会再次触发。

在指令中放入一个 console.log，你就会看到。