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

Question

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

$scope.date = new Date(); 

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

    $scope.opened = true; 
}; 

为了干的，我想在一个地方来声明这一点，所以该日期选择器可以在任何地方使用，而无需每次都声明设置。

我试过把它们放入一个工厂，将被注入控制器，但没有成功。我对建立工厂/服务很陌生。

我发现this SO question是提到的配置方法下宣布的设置，像这样：

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

但是，这并不为我工作的某些原因。

如何在一次性声明datepicker设置以便全局使用或注入？

Answer 1

要在“一个地方”，便于再利用申报日期选择器，我为数据/配置工厂：

.factory('datepickerService', function() { 

    var factory = {}; 

    factory.date = new Date(); 

    factory.open = function($event) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 
    this.opened = true; 
    }; 

    return factory; 

}); 

然后是注入的datepickerService一个datepicker控制器，挂钩$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-自举日期选择（但在宣布控制器）

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