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

$scope.setGridMessage({success: 'hello'});来电后，$scope.grid.message 仍然保留对旧对象的引用。要解决此问题，您可以使用angular.extend方法更新gridMessage，而不是创建新方法：

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

Answer 2

模板中有拼写错误，您需要绑定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>

范围变量不更新模板

2 个答案: