AngularJs - почему $ emit не работает в моем всплывающем окне

Question

Я использую всплывающее окно всплывающего окна bootstrap и пытаюсь исправить и событие $, но по какой-то причине главная страница не обнаруживает событие. Это довольно простая настройка, но я не могу понять, почему. Из того, что я могу сказать при просмотре Batarang, появляется всплывающее окно с охватом основной области приложения, поэтому я думал, что это сработает, но это не так. В этом простом приложении, когда вы нажимаете «ok» во всплывающем окне, оно должно установить значение в родительской области. Вот plunker:

http://plnkr.co/edit/F2W1LaWSsqinaFpiISAr?p=preview

//Here's code where $emit is called in the child (Factory): 
var modalInstance = $modal.open({ 
       templateUrl: 'popupMyWindow.html', 
       pScope: parentScope, 
       controller: 
        function($scope, $modalInstance){ 
         $scope.ok = function() { 
          $scope.$emit('ModalSelect', 'hello world'); 
          $modalInstance.close(null); 
         } 
        }, 

//Here's where $on is called in the main controller: 
$scope.$on('ModalSelect', function (event, selected) { 
      console.log('ModalSelect called successfully'); 
      $scope.selectedValue = selected; 
     }); 

Спасибо!

Answer 1

Я не уверен, что это хорошая идея передать $scope на службу. $scope очень контекст, где он размещен в представлении, так что вы действительно можете знать, должны ли вы $emit или $broadcast? Кроме того, при передаче $scope сложнее провести единичный тест. Вместо этого передайте функцию обратного вызова.

При этом вы вызываете $emit в область действия директивы $modal, которая может быть изолированной областью (я не знаю, как эта директива определена), поэтому она никогда не доходит до родителя.

Так что вы можете сделать:

parentScope.$emit('ModalSelect', 'hello world'); 

Или, вы можете использовать $rootScope:

$scope.$root.$broadcast('ModalSelect', 'hello world');