角UI日期选择不与分离范围指令中工作不与、指令、范围、日期

2023-09-13 05:06:32 作者:我可帅阿

我有,我相信是与我的指令的分离范围的问题。

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>

的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中工作始终指令?

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" />
 
精彩推荐
图片推荐