版本:
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>
控制器代码:
app.controller("ctrl", function($scope, heatMapSvc){
$scope.isDatePickerOpen = false;
$scope.openDatePicker = function(){
$scope.isDatePickerOpen = true;
console.log("isDatePickerOpen?", $scope.isDatePickerOpen);
};
});
选择输入时,日期选择器日历将按预期显示。但是,一旦选择了日期,日期选择器日历将不会重新显示。我没有把注意力集中在控件上,而是什么也没有。在我的
openDatePicker
方法调用中,我写到控制台以确保该方法被调用。每当我选择日期选择器时(无论是否出现日历),控制器都将触发正确的方法。我从包装的选项卡集中取出了日期选择器,该日期选择器可以正常工作(每个选择都显示日历)。我需要此日期选择器才能在我定义的uib选项卡中正常工作。
最佳答案
问题在于“范围继承”。 Angular作用域基于js对象原型继承。
所以... $scope
{ uib-tables scope } { uib-tab scope }
并且在第一次时,{uib-tab scope}没有从$ scope取得的isDatePickerOpen
属性,但是在poput关闭后,{ uib-tab scope }
将拥有自己的isDatePickerOpen
而不是等于false
,后者要更多优先权。函数openDatePicker
更改了$scope.isDatePickerOpen
,但是Calendar指令将从{ uib-tab scope }
中获取值。
您可以看到是否在{{isDatePickerOpen}}
标记后添加input
。第一次打开日历后,它总是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/