范围变量没有更新模板

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); 
}