How to access the modalInstance $scope from outside the model

Question

I want to update some value of a $modal in AngularJS but unable to understand how I can do this. Sample code is below:

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

Now when model open successfully and if I received some update from service and I again want to show updated values in a model then how I can call updateStatus() from outside the model. I try to using modalInstance.updateStatus(..) but it is not working. Can someone tell me a proper way to do this?

Answer 1

You can pass a scope option to $modal, and then use AngularJS events

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

You can use $broadcast to call that method. For example, after you received update from your service in your view's controller (where you are calling setupCall or launching the modal), do this:

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

Now, inside your controller of modal, register a listener for this:

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

Answer 3

Thanks everyone. I resolve this by adding custom 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)
            });
            ...