angularjs - Angular-UI 日期选择器在具有隔离范围的指令中不起作用

Question

我有一个问题，我认为它与我的指令的隔离范围有关。

一旦从弹出窗口中选择了日期，Angular-UI 弹出日期选择器将不会再次出现在指令中。

在指令之外，即使选择了日期，弹出窗口也会继续正常运行。

出于演示目的，我使用了完全相同的标记和属性来显示弹出窗口，以便两者相互影响。即使删除了 blob 外部的弹出窗口和日期选择器，也可以看到 blob 指令中的相同 [损坏] 行为。

通过具有相同的标记和 is-open 属性，当在 blob 内单击日历图标时，我们看到弹出窗口出现在 blob 外，因此 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 指令中始终如一地工作？

Answer 1

我在这里提出的解决方案是在 is-open 属性中引用父范围:

 ng-model="$parent.dt" is-open="opened" />

成为

 ng-model="$parent.dt" is-open="$parent.opened" />