Angular decorator/extending UI Bootstrap Datepicker directive

问题

I'm trying to extend the angular ui bootstrap date picker directive. My aim is to be able to override the positioning of the datepickerdirective. The positioning happens on a $watch event inside of the uibDatepickerPopupController which is bound to the uibDatepickerPopup directive. I'm following the guide here to decorate a directive that has a mapped controller here. http://angular-tips.com/blog/2013/09/experiment-decorating-directives/

I'm getting the following error

TypeError: Cannot read property 'length' of undefined

So far I have the following:

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

and a basic angular controller

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
       };
    });

Here is my attempt to override the behavior

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

回答1:

There may be other issues, but the one that I see is that you need to return directive from your decorator function because Angular needs to know which element in the $delegate array your are decorating (yes, there could be multiple)

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;

   });
});

来源：https://stackoverflow.com/questions/35556151/angular-decorator-extending-ui-bootstrap-datepicker-directive

标签

angularjs

angular-ui-bootstrap