У меня есть проблема, которая, как мне кажется, связана с изолированной областью действия моей директивы.
Всплывающее окно выбора даты Angular-UI больше не будет отображаться в директиве после выбора даты из всплывающего окна.
Вне директивы всплывающее окно продолжает работать правильно, даже если выбрана дата.
В демонстрационных целях я использовал точно такую же разметку и свойство для отображения всплывающего окна, чтобы они влияли друг на друга. Такое же [неправильное] поведение в директиве blob можно увидеть, даже если всплывающее окно и средство выбора даты за пределами большого двоичного объекта удалены.
Имея ту же разметку и свойство is-open, мы видим, что всплывающее окно появляется за пределами большого двоичного объекта при щелчке значка календаря внутри большого двоичного объекта, поэтому функция open работает правильно. Кажется, что всплывающее окно в диалоговом окне не может быть воссоздано после того, как оно было отклонено путем выбора даты.
Разметка:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<meta name="description" content="Directive Scope" />
<h1>Directive scope testing</h1>
<div ng-app="testApp" ng-controller="TestCtrl">
<blob show="isVisible">
This is the content. We need in the blob directive, <em>unrelated to the issue being demonstrated</em>.
<br/>dt in blob scope: {{dt}}
<hr>
<input type="text" datepicker-popup="d MMM yyyy" ng-model="$parent.dt" is-open="opened" />
<button type="button" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</blob>
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h3>Outside the dialog</h3>
<input type="text" datepicker-popup="d MMM yyyy" ng-model="dt" is-open="opened" />
<button type="button" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
Javascript:
var app = angular.module("testApp", ['ui.bootstrap']);
app.directive("blob", function(){
return {
restrict: "E",
scope: {
show:'='
},
transclude: true,
template: '<div ng-show="show"><input type="text" ng-model="test"><br/>{{test}}</div><div ng-transclude></div>'
};
});
app.controller("TestCtrl", function($scope) {
$scope.isVisible = true;
$scope.open = function($event){
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
});
Рабочая демонстрация: http://jsbin.com/viqem/5.
Как я могу заставить всплывающее окно выбора даты работать последовательно внутри директивы blob?
