Jon*_*Jon 1 javascript datepicker angularjs angular-ui-bootstrap
版本:
我在选项卡页面中使用了一个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);
};
});
选择输入时,datepicker日历将按预期显示.但是,一旦我选择了日期,就会在选择时重新显示日期选择器日历.我没有专注,重新聚焦控制,没有.在我的openDatePicker方法调用中,我写入控制台以确保调用该方法.每次我选择日期选择器(无论是否出现日历),控制器都会触发正确的方法.
我将日期选择器从包装的tabset中取出,并且datepicker正常工作(每个选择显示日历).我需要这个datepicker在我定义的uib-tabset中正常工作.
问题在于"范围继承".角度范围基于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 }.
如果要{{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)访问父范围.不建议提供信息
controlller:
$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/
| 归档时间： |
|
| 查看次数： |
4308 次 |
| 最近记录： |