Angular-UI datepicker 在具有隔离范围的指令中不起作用 [英] Angular-UI datepicker doesn't work within a directive with isolate scope

问题描述

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

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

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

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

通过具有相同的标记和 is-open 属性，当在 blob 内单击日历图标时，我们看到弹出窗口出现在 blob 外，因此 open 函数似乎工作正常.一旦通过选择日期将其关闭，似乎无法重新创建对话框中的弹出窗口.

标记:

<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="指令范围"/><h1>指令范围测试</h1><div ng-app="testApp" ng-controller="TestCtrl"><blob show="isVisible">这是内容.我们需要在 blob 指令中，<em>与正在演示的问题无关</em>.<br/>dt 在 blob 范围内:{{dt}}<小时><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>选择的日期是:<em>{{dt |日期:'fullDate' }}</em></pre><h3>对话框外</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>

Javascript:

var app = angular.module("testApp", ['ui.bootstrap']);app.directive("blob", function(){返回 {限制:E"，范围: {显示:'='},转置:真实，模板:'<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 指令中始终如一地工作?

解决方案

我放在这里希望能帮助别人的解决方案是在 is 中也引用父作用域-open 属性:

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

变成了

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

I have an issue that I believe is related to the isolate scope of my directive.

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.

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.

Markup:

<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;
  };
});

Working demo: http://jsbin.com/viqem/5

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" />

became

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

这篇关于Angular-UI datepicker 在具有隔离范围的指令中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！