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，请写：

$scope.items = [];

在您的情况下，您创建空对象{}，因此您也调用指令。

因此，该指令将newThing = 'I am new';添加到空对象中。

如果您想使其与$scope.items = [{}]一起使用，请编写如下指令：

.directive('myDir', function($injector) {
    return {
        scope: {
            items: '='
        },
        link: function(scope) {            
            if(scope.items[0].foo !== undefined){  // dummy validation
                 scope.items.newThing = 'I am new';
            }            
        }
    };
});

演示 Fiddle

Answer 2

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

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

Answer 3

该行

scope.items.newThing = 'I am new';

只是在$ scope.items对象上添加一个新属性“newThing”，而不是覆盖它。如果您在Chrome控制台中展开对象，则会看到：

Array[1] 
0: Object 
    $$hashKey: "004" 
    foo: "bar"
    __proto__: Object 
length: 1 
newThing: "I am new"
__proto__: Array[0]

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

3 个答案: