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

如何让datepicker弹出窗口在blob指令中始终如一地工作？

Answer 1

我希望它能帮助其他人的解决方案是在is-open属性中引用父作用域：

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

成了

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

Angular-UI datepicker在具有隔离范围的指令中不起作用

标记：

使用Javascript：

1 个答案: