Angular decorator/extending UI Bootstrap 日期选择器指令

Question

我正在尝试扩展 angular ui bootstrap 日期选择器指令。我的目标是能够覆盖日期选择器指令的定位。定位发生在绑定到 uibDatepickerPopup 指令的 uibDatepickerPopupController 内部的 $watch 事件上。我在这里按照 guide 来装饰一个在这里有映射控制器的指令。 http://angular-tips.com/blog/2013/09/experiment-decorating-directives/

我收到以下错误

TypeError: Cannot read property 'length' of undefined

到目前为止我有以下内容：

<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup.opened" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

和一个基本的 angular 控制器

var app = angular.module("app", ["ui.bootstrap"]);

    app.controller("myCtrl", function($scope) { 
       $scope.dt = new Date();

       $scope.open = function() {
          $scope.popup.opened = true;
       };

       $scope.popup = {
          opened: false
       };
    });

这是我尝试覆盖该行为的尝试

var uibModel = angular.module("ui.bootstrap");
uibModel.config(function($provide) {
   $provide.decorator('uibDatepickerPopupDirective', function($delegate, $controller) {
      var directive = $delegate[0];

      var controllerName = directive.controller;

      directive.controller = function($scope, $element, $attrs, $compile, $parse, $document, $rootScope, $uibPosition, dateFilter, uibDateParser, uibDatepickerPopupConfig, $timeout, uibDatepickerConfig) {
         var controller = $controller(controllerName, {
            $scope: $scope,
            $element: $element,
            $attrs: $attrs,
            $compile: $compile,
            $parse: $parse,
            $document: $document,
            $rootScope: $rootScope,
            $uibPosition: $uibPosition,
            dateFilter: dateFilter,
            uibDateParser: uibDateParser,
            uibDatepickerPopupConfig: uibDatepickerPopupConfig,
            $timeout: $timeout,
            uibDatepickerConfig: uibDatepickerConfig
         });

         $scope.position.top = 0;

         return controller;
      };
   });
});

http://codepen.io/mantisimo/pen/OMeExN

Answer 1

可能还有其他问题，但我看到的是您需要从装饰器函数中使用 return 指令，因为 Angular 需要知道您是 $delegate 数组中的哪个元素装饰（是的，可能有多个）

var uibModel = angular.module("ui.bootstrap");
uibModel.config(function($provide) {
    $provide.decorator('uibDatepickerPopupDirective', function($delegate, $controller) {
      var directive = $delegate[0];

      var controllerName = directive.controller;

      directive.controller = function($scope, $element, $attrs, $compile, $parse, $document, $rootScope, $uibPosition, dateFilter, uibDateParser, uibDatepickerPopupConfig, $timeout, uibDatepickerConfig) {
         var controller = $controller(controllerName, {
            $scope: $scope,
            $element: $element,
            $attrs: $attrs,
            $compile: $compile,
            $parse: $parse,
            $document: $document,
            $rootScope: $rootScope,
            $uibPosition: $uibPosition,
            dateFilter: dateFilter,
            uibDateParser: uibDateParser,
            uibDatepickerPopupConfig: uibDatepickerPopupConfig,
            $timeout: $timeout,
            uibDatepickerConfig: uibDatepickerConfig
         });

         $scope.position.top = 0;

         return controller;
      };

      return directive;

   });
});

Angular decorator/extending UI Bootstrap 日期选择器指令

Angular decorator/extending UI Bootstrap Datepicker directive

angularjs

angular-ui-bootstrap