AngularJS: Скрыть всплывающее окно от дочернего контроллера (всплывающее содержимое)

Question

У меня проблема с моими директивами. Если я вызываю строку $scope.popup.show = false из всплывающего контроллера, она работает нормально. Если я вызываю $scope.hideModal() от ребенка contentDirective, то код вызывается (отмечено в debug), но значение $scope.popup.show не изменяется (при отладке значение равно «false»), и всплывающее окно does'nt hide: /.

У вас есть идея? :)

index.html:

<popup title="sometitle"> 
    <contentDirective> </contentDirective> 
</popup> 

popup.html:

<div ng-show="popup.show"> 
    <div ng-transclude></div> 
</div> 

popup.js

.directive(.... 
    return {.... 
     scope: {} 
    } 
}) 
.controller(.... 
    $scope.hideModal = function() 
    { 
     $scope.popup.show = false; 
    } 
}]); 

contentDirective.htlm (НЕ изолированный сфера)

<div> 
    <button onclick="changeSomethingAndHide()"/> 
</div> 

contentDirective.js

.controller(.... 
    $scope.changeSomethingAndHide = function() 
    { 
     //calls the parent function 
     $scope.hideModal(); 
    } 
}]); 

Может быть, я что-то пропустил ..

Спасибо!

Answer 1

Когда вы имеете дело с транслированным контентом, область становится немного сложной.

Переданный объем по умолчанию не унаследован (вы можете изменить это), это «родственная» область действия прилагаемой директивы, которая несколько запутанна, но для этого есть веские причины.

Таким образом, ваш contentDirective действительно ничего не видит в вашей директиве popup по умолчанию. Когда вы устанавливаете $ scope.popup.show = false в функции hideModal(), все, что он делает, это установить новую переменную область contentDirective, а не устанавливать ее в области всплывающего окна.

два варианта для решения этой проблемы:

1. Вы можете вручную transclude contentDirective и иметь его использовать тот же объем, как ваша всплывающую директиву. См. http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ для более подробной информации.

2. Вы можете объявить contentDirective с ключевым словом require, указывающим, что вы хотите получить доступ к контроллеру директивы popup. Это будет передано в вашу функцию ссылок, которую вы можете использовать для вызова методов в контроллере popup. См. https://egghead.io/lessons/angularjs-directive-to-directive-communication для более подробной информации.