這個Angular模型爲什麼沒有被完全覆蓋？

我遇到了一個奇怪的問題，其中一個模型在一個指令中已經設置了一個新屬性後沒有被完全覆蓋。這個Angular模型爲什麼沒有被完全覆蓋？

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/

試着點擊更換和檢查控制檯。

爲什麼newThing仍然存在，即使$ scope.items被空白數組和對象覆蓋？

來源

2013-11-14 user2906759

如果你想重置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-14 13:14:06

當items變化，該指令再次發射。

把一個console.log放在指令中，你會看到。

來源

2013-11-14 13:16:00 Beterraba

線

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-14 13:16:12 mathieu

這個Angular模型爲什麼沒有被完全覆蓋？

回答

相關問題