[英]How can angular ui-bootstrap datepicker settings be declared in one place?
我正在使用angular-ui datepicker ,当前具有在控制器中声明的设置,例如:
$scope.date = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
为了成为DRY,我想在一个地方声明它,以便datepicker可以在任何地方使用,而不必每次都声明设置。
我曾尝试将它们放入将被注入控制器的工厂中,但没有成功。 我对建立工厂/服务很陌生。
我发现了这样的问题 ,它提到在config方法下声明设置,如下所示:
.config(['datepickerConfig', function(datepickerConfig) {
datepickerConfig.showWeeks = false;
}]);
但这出于某种原因对我不起作用。
如何在一个地方声明日期选择器设置以便全局使用或注入?
为了将datepicker声明在“一个地方”以便于重复使用,我为data / config建立了一个工厂:
.factory('datepickerService', function() {
var factory = {};
factory.date = new Date();
factory.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
this.opened = true;
};
return factory;
});
然后,一个日期选择器控制器注入datepickerService
,将$scope
与工厂配置挂钩。
.controller('datepickerCtrl', function ($scope, datepickerService) {
$scope.date = datepickerService.date;
$scope.open = datepickerService.open;
});
一条指令:
.directive('supermanDatepicker', function () {
return {
templateUrl:'views/partials/datepicker.html'
};
});
具有标准ui-boostrap datepicker的HTML部分模板(但声明了控制器)
<div class="input-group" ng-controller="datepickerCtrl">
<input type="text"
class="form-control"
datepicker-popup="{{format}}"
ng-model="shortDate"
placeholder="dd-mm-yyyy"
is-open="opened"
min-date="minDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button type="button"
class="btn"
ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
最后,它可以插入任何视图中:
<div superman-datepicker></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.