javascript - Bootstrap 模式内的 ng-repeat 未更新

Question

我正在使用 Bootstrap 模式对话框来处理我的 angularjs 应用程序中的聊天逻辑 View 。

我有一个这样的听众

$rootScope.$on('msg:received', handleNewMessageAction);

及其处理程序

function handleNewMessageAction(e, data) {
    var selTId = getSelectedThread().id;

    if (data.message.threadId == selTId) {
        data.message.getter = SessionService.getAuthProfile();
        $scope.messages.push(data.message);
        getSelectedThread().lastMessage.message = data.message.message;
    } else {
        for (var i = 0; i < $scope.threads.length; i++) {
            if ($scope.threads[i].id == data.message.threadId) {
                $scope.threads[i].lastMessage.message = data.message.message;
                break;
            }
        }
    }

    $scope.$apply();
}

当我第一次打开对话框时一切正常。但是，如果我导航到另一个状态(我正在使用 ui-router)，然后再次打开模式。当处理程序在数组中推送新项目时，我不会更新 View 。我已经多次调试它。处理程序工作正常，它在数组(消息)中推送新项目，但 View 中的数组没有更新；

这是打开对话框的函数。

$scope.openModal = function () {
    modalInstance = $modal.open({
        templateUrl: 'views/partials/directives/modals/messages.html',
        windowClass: 'extended-message-modal',
        scope: $scope
    });

    return false;
};

这是模态模板的一小部分

<div ng-repeat="msg in messages track by $index">
    <div class="message-other-side pull-left" ng-if="msg.sender.id != authId">
        <div class="pull-left message-profile-image">
            <img ng-src="{{getImage(msg.sender.gender,msg.sender.avatar)}}">
        </div>
        <div class="message-content pull-left">{{msg.message}}</div>
    </div>

    <div class="message-my-side pull-right" ng-if="msg.sender.id == authId">
        <div class="message-content pull-left">
            {{msg.message}}
        </div>
        <div class="pull-left message-profile-image">
            <img ng-src="{{getImage(msg.sender.gender,msg.sender.avatar)}}">
        </div>
    </div>
    <div class="clearfix"></div>
</div>

问题是什么？

Answer 1

定义一个模态 Controller 并使用此 Controller 范围来获取和更新模态内的数据。

$scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl'
    });
  };

如果您将数据从其他 Controller 传递到模态框，则可以使用 resolve 使其在模板范围内可用。

$scope.open = function (dataFromOtherController) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        data: function () {
          return dataFromOtherController;
        }
      }
    });
  };

现在您可以在模态 Controller 和模板中访问$scope.data。