Я использую angular ui modal для создания модального в моем проекте.
Все работает нормально, пока мне не понадобится ссылаться на переменную в родительской области. см. код плунжера
Похоже, модальный не может получить доступ к родительской области. Есть ли способ преодолеть это?
Angular Модификаторы пользовательского интерфейса используют $rootScope по умолчанию (см. документацию здесь).
Вы можете передать параметр scope с настраиваемой областью при открытии модального файла. scope: $scope, если вы хотите передать родительскую область. Модальный контроллер создаст подпункт из этой области, поэтому вы сможете использовать его только для своих начальных значений.
Вам нужно будет обратиться к родительской области в ваших опциях $modal. Angular документация
Ниже приведен фрагмент кода того, что я добавил, чтобы он работал.
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
scope:$scope, //Refer to parent scope here
resolve: {
items: function () {
return $scope.items;
}
}
});
Вы можете добавить идентификатор родительского div и использовать его область действия.
<div id="outerdiv" ng-controller="OuterCtrl">
<h2>Outer Controller</h2>
<input type="text" ng-model="checkBind">
<p>Value Of checkbind: {{checkBind}}</p>
И настройте "поддельную" привязку в контроллере
//init
$scope.checkBind = angular.element(document.getElementById('outerdiv')).scope().checkBind;
$scope.$watch('checkBind', function (newValue, oldValue) {
//update parent
angular.element(document.getElementById('outerdiv')).scope().checkBind = $scope.checkBind;
});