1

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

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 仍然存在？

4

3 回答 3

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

于 2013-11-14T13:14:06.477 回答
1

更改时items，该指令再次被触发。

将 console.log 放入指令中，您将看到。

于 2013-11-14T13:16:00.720 回答
0

线

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]
于 2013-11-14T13:16:12.627 回答