AngularJS uib-datepicker 在 uib-tab 中第一个 open/close 事件后不显示日历

Question

版本：

Bootstrap 3.5.5
AngularJS1.4.7
AngularUIB 0.14.3

我在标签页中使用 uib-datepicker（使用 uib-tabset）

<uib-tabset type='pills'>
  <uib-tab heading='HeatMap'>
    <input id='dateToImport' type='text' uib-datepicker-popup='yyyy-MM-dd' class='form-control' ng-change='changeDateTime()' ng-model='selectedDate' is-open='isDatePickerOpen' ng-click='openDatePicker($event)'/>
  </uib-tab>
</uib-tabset>

控制器代码：

app.controller("ctrl", function($scope, heatMapSvc){
  $scope.isDatePickerOpen = false;

  $scope.openDatePicker = function(){
    $scope.isDatePickerOpen = true;
    console.log("isDatePickerOpen?", $scope.isDatePickerOpen);
  };
});

当 select 输入时，日期选择器日历按预期显示。但是，一旦我 select 一个日期，日期选择器日历将不会重新出现在 selection 上。我没有关注并重新关注控件，没有。在我的 openDatePicker 方法调用中，我写入控制台以确保调用该方法。每次我 select 日期选择器（不管日历是否出现），控制器都会触发正确的方法。

我已将日期选择器从它所在的选项卡集中取出，并且日期选择器工作正常（每隔 selection 显示日历）。我需要这个日期选择器在我定义的 uib-tabset 中正常工作。

Answer 1

问题出在 "scope inheritance"。 Angular scopes是基于js对象原型继承的。

所以... $scope <- { uib-tables scope } <- { uib-tab scope } 第一次，{ uib-tab scope } 没有 isDatePickerOpen 属性而是从 $scope 获取的，但是在 poput 关闭后，{ uib-tab scope } 将拥有自己的 isDatePickerOpen 不等于 false，后者更优先。函数 openDatePicker 更改 $scope.isDatePickerOpen，但日历指令将从 { uib-tab scope }.

中获取值

如果在input标签后加{{isDatePickerOpen}}就可以看到了。第一次打开日历后，它总是 false.

解决方案

1) 使用controllerAs语法。 推荐

控制器：

  var vm = this;

  vm.isDatePickerOpen = false;

  vm.openDatePicker = function(){
    vm.isDatePickerOpen = true;
    console.log("isDatePickerOpen?", vm.isDatePickerOpen);
  };

模板：

<uib-tabset type='pills'>
  <uib-tab heading='HeatMap'>
    <input id='dateToImport' type='text' uib-datepicker-popup='yyyy-MM-dd' class='form-control' ng-change='changeDateTime()' ng-model='selectedDate' is-open='vm.isDatePickerOpen' ng-click='vm.openDatePicker($event)'/>
  </uib-tab>
</uib-tabset>

注意！ 要使用此解决方案，您必须使用 controller as 语法来声明控制器。

<body ng-controller="SettingsController1 as vm">
...
</body>

或者如果您使用 ui-router

$stateProvider.state('contacts', {
  templateUrl: '...',
  controller: function(){
    ...
  },
  controllerAs: 'vm'
})

2) 访问父作用域。 不推荐 供参考

控制器：

  $scope.isDatePickerOpen = false;

  $scope.openDatePicker = function(){
    $scope.isDatePickerOpen = true;
    console.log("isDatePickerOpen?", $scope.isDatePickerOpen);
  };

模板：

<uib-tabset type='pills'>
  <uib-tab heading='HeatMap'>
    <input id='dateToImport' type='text' uib-datepicker-popup='yyyy-MM-dd' class='form-control' ng-change='changeDateTime()' ng-model='selectedDate' is-open='$parent.$parent.isDatePickerOpen' ng-click='openDatePicker($event)'/>
  </uib-tab>
</uib-tabset>

3) 使用对象。 可以用，但先解决更好

控制器：

  $scope.status = {isDatePickerOpen : false};

  $scope.openDatePicker = function(){
    $scope.status.isDatePickerOpen = true;
    console.log("isDatePickerOpen?", $scope.status.isDatePickerOpen);
  };

模板：

<uib-tabset type='pills'>
  <uib-tab heading='HeatMap'>
    <input id='dateToImport' type='text' uib-datepicker-popup='yyyy-MM-dd' class='form-control' ng-change='changeDateTime()' ng-model='selectedDate' is-open='status.isDatePickerOpen' ng-click='openDatePicker($event)'/>
  </uib-tab>
</uib-tabset>

可能这篇文章更详细地解释了主题。 http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

Answer 2

得到这个与以下工作：

<input id='dateToImport' type='text' uib-datepicker-popup='yyyy-MM-dd' class='form-control' ng-model='selectedDate' is-open='dateToImportIsOpen' ng-click='dateToImportIsOpen = !dateToImportIsOpen'/>

注意 dateToImportIsOpen 将写入当前 $scope。

AngularJS uib-datepicker 在 uib-tab 中第一个 open/close 事件后不显示日历

AngularJS uib-datepicker doesn't display calendar after the first open/close event while in uib-tab

javascript

datepicker

angularjs

angular-ui-bootstrap