Question

在我的angularjs应用程序中，我将数据存储在$ rootScope中，如下所示：

$rootScope.users = [{id: 1, name: 'Bob'}, {id: 2, name: 'Alice'}];

在某些时候，我从服务器获得了更改：

function changeFromServer(user) {
    for (var i=0; i < $rootScope.users.length; ++i) {
        if ($rootScope.users[i].id == user.id) {
            $rootScope.users[i] = user;
            break;
        }
    }
    $rootScope.apply();
}

在大多数情况下这很好用。但在某些情况下，我会调出模态对话框，如下所示：

function changeUser(user) {
    var modalInstance = $modal.open({
        templateUrl: 'views/show.html',
        controller: 'UserModalCtrl',
        resolve: {
            user: function() {
                return user;
            }
        }
    });
}

当显示此模式并且更改来自服务器时，用户列表将按原样更新，但是，模式不会更新。这是为什么？就好像它有一个对象或其他东西的副本。

Answer 1

我不知道你是如何做你的模态的，但是一个自定义指令，transclude设置为true而没有隔离范围，可以帮助你用你的模态从控制器范围共享你的用户。

要显示模态，只需添加一个ng-show属性，并在控制器中添加一个引用prop的标志：

<div ng-controller='myCtrl'>
    <my-modal ng-show="showModal">
        <span ng-bind-html="user.name" ng-repeat="user in users"></span>
        <button ng-click="showModal = !showModal">Close</button>
    </my-modal>
</div>

JS：

angular.module('myApp', []).controller('myCtrl', ['$scope', 'userProviderService', function($scope, userProviderService) {
    $scope.userListUpdated = false;
    // Init the userlist in the service!
    $scope.users = [];
    $scope.$watch('userProviderService.users', function(newValue, oldValue){
         $scope.users = newValue;
         $scope.showModal = true;
    });
}])

如何将模型更改传播到模态？

1 个答案: