angular ui-bootstrap 日期选择器设置如何在一个地方声明？

Question

我正在使用 angular-ui datepicker，目前在控制器中声明了设置，例如：

$scope.date = new Date();

$scope.open = function($event) {
  $event.preventDefault();
  $event.stopPropagation();

  $scope.opened = true;
};

为了DRY，我想在一个地方声明这个，这样就可以在任何地方使用日期选择器，而不必每次都声明设置。

我试过将它们放入将注入控制器的工厂中，但没有成功。我对构建 factories/services.

很陌生

我发现 this SO question 提到在配置方法下声明设置，如下所示：

.config(['datepickerConfig', function(datepickerConfig) {
  datepickerConfig.showWeeks = false;
}]);

但出于某种原因，这对我不起作用。

如何在一个地方声明日期选择器设置以供全局使用或用于注入？

Answer 1

为了在 'one place' 中声明日期选择器以便于重复使用，我为 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'
  };

});

HTML 带有标准 ui-boostrap 日期选择器的部分模板（但声明控制器）

<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>

angular ui-bootstrap 日期选择器设置如何在一个地方声明？

How can angular ui-bootstrap datepicker settings be declared in one place?

javascript

angularjs

angular-ui-bootstrap