[英]How can angular ui-bootstrap datepicker settings be declared in one place?
I'm using angular-ui datepicker and currently have the settings declared in a controller, eg: 我正在使用angular-ui datepicker ,当前具有在控制器中声明的设置,例如:
$scope.date = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
In order to be DRY, I want to declare this in one place, so that the datepicker can be used anywhere, without having to declare the settings each time. 为了成为DRY,我想在一个地方声明它,以便datepicker可以在任何地方使用,而不必每次都声明设置。
I've tried putting them into a factory that would be injected into a controller, but with no success. 我曾尝试将它们放入将被注入控制器的工厂中,但没有成功。 I'm quite new to building factories/services.
我对建立工厂/服务很陌生。
I found this SO question that mentions declaring the settings under the config method, like this: 我发现了这样的问题 ,它提到在config方法下声明设置,如下所示:
.config(['datepickerConfig', function(datepickerConfig) {
datepickerConfig.showWeeks = false;
}]);
But this doesn't work for me for some reason. 但这出于某种原因对我不起作用。
How can I declare the datepicker settings in once place to be used globally, or for injection? 如何在一个地方声明日期选择器设置以便全局使用或注入?
To declare datepicker in 'one place' for easy re-use, I built a factory for the data/config: 为了将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;
});
Then a datepicker controller that injects the datepickerService
, hooking the $scope
up with the factory config. 然后,一个日期选择器控制器注入
datepickerService
,将$scope
与工厂配置挂钩。
.controller('datepickerCtrl', function ($scope, datepickerService) {
$scope.date = datepickerService.date;
$scope.open = datepickerService.open;
});
A directive: 一条指令:
.directive('supermanDatepicker', function () {
return {
templateUrl:'views/partials/datepicker.html'
};
});
HTML partial template with the standard ui-boostrap datepicker (but declaring the controller) 具有标准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>
Then finally, it can be plugged into any view: 最后,它可以插入任何视图中:
<div superman-datepicker></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.