我有,我相信是与我的指令的分离范围的问题。
I have an issue that I believe is related to the isolate scope of my directive.
该角的UI弹出日期选择器不会在一旦日期已经从弹出选择的指令再次出现。
The Angular-UI popup date picker will not appear again in the directive once a date has been selected from the popup.
指令之外,弹出继续即使在日期已选定正常工作。
Outside the directive, the pop up continues to function correctly even when a date has been selected.
有关演示的目的,我使用了相同的标记和属性显示在弹出使两个会相互影响。在斑点指令相同的[破]行为可以即使斑点外的弹出和日期选择器除去可见。
For demonstration purposes, I've used the exact same markup and property for displaying the popup so that the two will influence each other. The same [broken] behaviour in the blob directive can be seen even if the popup and date picker outside the blob are removed.
由具有相同的标记和是开放
属性,我们看到弹出出现点击BLOB中的日历图标时,BLOB之外,因此打开
功能似乎正常工作。这似乎在对话框中弹出无法重新创建一旦被通过选择日期驳回。
By having the same markup and is-open
property, we see the popup appear outside the blob when the calendar icon is clicked inside the blob, so the open
function appears to be working correctly. It seems the popup in the dialog cannot be re-created once it has been dismissed by selecting a date.
<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>
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中工作始终
指令?
How can I get the datepicker popup to work consistently inside the blob
directive?
该解决方案我把在这里,希望它会帮助别人,是要同时参考父范围在是开放
属性:
The solution, which I'm putting here in the hope it'll help someone else, was to also refer to the parent scope in the is-open
attribute:
ng-model="$parent.dt" is-open="opened" />
成为
ng-model="$parent.dt" is-open="$parent.opened" />