範圍變量沒有更新模板

Question

我有HTML結構就是這樣，不被顯示grid.message.success

<div ng-controller="MYAPPCtrl"> 
    .... 
    <div ng-controller="UserCtrl"> 
    .... 
     <div ng-controller="GridCtrl> 
      <div ng-show="grid.message.success" class="success-msg">{{grid.message.success}}</div> 
      <div ng-show="grid.message.error" class="error-msg">{{grid.message.error}}</div> 
     </div> 
     <button ng-click="deleteUsers()"... /> 
    </div> 
</div> 

這裏是我的js代碼

function MYAPPCtrl($scope) { 
    $scope.gridMessage = { 
     success: null, 
     error: null 
    } 

    $scope.setGridMessage = function(d) { 
     $scope.gridMessage = d; 
    } 
} 
function UserCtrl($scope) { 
    $scope.deleteUsers = function() { 
     $scope.setGridMessage({success: 'hello'}); 
    }) 
} 
function GridCtrl($scope) { 
    $scope.grid = { 
    message: $scope.gridMessage, 
    }; 
} 

Answer 1

您在模板中有一個錯字，它不是grid.message您需要綁定到，但gridMessage。

更新您的模板：

<div ng-controller="MYAPPCtrl"> 
    .... 
    <div ng-controller="UserCtrl"> 
    .... 
     <div ng-controller="GridCtrl> 
      <div ng-show="gridMessage.success" class="success-msg">{{gridMessage.success}}</div> 
      <div ng-show="gridMessage.error" class="error-msg">{{gridMessage.error}}</div> 
     </div> 
     <button ng-click="deleteUsers()"... /> 
    </div> 
</div> 

Answer 2

後$scope.setGridMessage({success: 'hello'});電話，$scope.grid.message仍然持有引用舊的對象。要解決這個問題，你可以使用angular.extend方法，以更新gridMessage，不製造新的：

$scope.setGridMessage = function(d) { 
    angular.extend($scope.gridMessage,d); 
}