모델 외부에서 modalInstance $ 범위에 액세스하는 방법

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

당신은 $modal에 scope 옵션을 통과 한 다음 그 메소드를 호출하는 $broadcast을 사용할 수 있습니다 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

를 사용할 수 있습니다. 당신이 (당신이 setupCall 전화 또는 모달을 시작하는)보기의 컨트롤러의 서비스에서 업데이트를받은 후 예를 들어, 다음을 수행하십시오

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

이제 모달의 컨트롤러 내부에,이 청취자를 등록 :

$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) 
      }); 
      ...