版本:
- Bootstrap 3.5.5
- AngularJS 1.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>
Controller 代码:
app.controller("ctrl", function($scope, heatMapSvc){
$scope.isDatePickerOpen = false;
$scope.openDatePicker = function(){
$scope.isDatePickerOpen = true;
console.log("isDatePickerOpen?", $scope.isDatePickerOpen);
};
});
选择输入时,日期选择器日历按预期显示。但是,一旦我选择了一个日期,日期选择器日历就不会在选择时重新出现。我没有关注并重新关注控件,没有。在我的 openDatePicker
方法调用中,我写入控制台以确保调用该方法。每次我选择日期选择器(无论日历是否出现), Controller 都会触发正确的方法。
我已将日期选择器从它所在的选项卡集中取出,并且日期选择器工作正常(每次选择都显示日历)。我需要这个日期选择器在我定义的 uib-tabset 中正常工作。
最佳答案
问题出在“范围继承”中。 Angular 作用域基于 js 对象原型(prototype)继承。
所以...
第一次,{ uib-tab scope } 没有 isDatePickerOpen
属性,它取自 $scope,但在 poput 关闭后,{ uib-tab scope }
将取自己的isDatePickerOpen
比等于false
,后者更优先。函数 openDatePicker
更改 $scope.isDatePickerOpen
,但日历指令将从 { uib-tab scope }
中获取值。
如果在input
标签后添加{{isDatePickerOpen}}
就可以看到了。第一次打开日历后,它总是 false
。
解决方案
1) 使用 controllerAs
语法。 推荐
Controller :
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
语法来声明 Controller 。
<body ng-controller="SettingsController1 as vm">
...
</body>
或者如果你使用 ui-router
$stateProvider.state('contacts', {
templateUrl: '...',
controller: function(){
...
},
controllerAs: 'vm'
})
2) 访问父作用域。 不推荐信息
Controller :
$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) 使用对象。 可以用,但先解决更好
Controller :
$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/
关于javascript - AngularJS uib-datepicker 在 uib-tab 中的第一个打开/关闭事件后不显示日历,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34537280/