Question

我想在AngularJS中更新$modal的某些值，但无法理解我是如何做到这一点的。示例代码如下：

var modalInstance;

  function setupCall(data) {

    var templateURL = 'partials/Chat.html';
    var cssClass =  'medium-Modal';
     modalInstance = $modal.open({
        backdrop: "static",
        keyboard: false,
        backdropClick: false,
        windowClass: cssClass,
        templateUrl: templateURL,
        controller: function ($scope, $modalInstance) {


            $scope.updateStatus=function() {
            ...
            }
        }
    });
    modalInstance.result.then(function() {

    });
}
 // first time i call this function to open model
 setupCall(event);

现在当模型成功打开并且我从服务中收到一些更新并且我再次想要在模型中显示更新的值时，我如何从模型外部调用updateStatus()。我尝试使用 modalInstance.updateStatus(..)但它不起作用。有人可以告诉我一个正确的方法吗？

Answer 1

您可以将scope选项传递给$modal，然后使用AngularJS事件

var modalScope = $rootScope.$new();

myService.doSomethingAsync(function (data) {
  $rootScope.$emit('some event', data);
});

$modal.open({
  scope: modalScope,
  controller: function ($scope) {

    /* ... */

    $scope.$on('some event', function() {
      $scope.updateStatus();
    });
  }
});

Answer 2

您可以使用$broadcast来调用该方法。例如，在您的视图控制器（您正在呼叫setupCall或启动模式）中收到服务更新后，请执行以下操作：

$rootScope.$broadcast("dataUpdatedFoo", {newData: "bar"));

现在，在你的modal控制器中，为此注册一个监听器：

$scope.$on("dataUpdatedFoo", function(e, data) {
    $scope.updateStatus();
});

Answer 3

谢谢大家。我通过添加自定义eventlistener来解决这个问题。

 var listeners = [];

function _addEventListener(listener) {
    listeners.push(listener);
    return listener;
}

function _removeListener(listener) {
    for (var i=0; i < listeners.length; i++){
        if (listeners[i] === listener){
            listeners.splice(i, 1);
            break;
        }
    }
} 
function setupCall(data) {
   ......
    modalInstance = $modal.open({
        backdrop: "static",
        keyboard: false,
        backdropClick: false,
        windowClass: cssClass,
        templateUrl: templateURL,
        controller: function ($scope, $modalInstance) {

            var listener = _addEventListener(function (event) {
              $log.info("chat msg: "+JSON.stringify(event));
            });

            $scope.$on('destroy', function () {
                _removeListener(listener)
            });
            ...

如何从模型外部访问modalInstance $ scope

3 个答案: