Angular decorator/extending UI Bootstrap Datepicker directive

Question

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

Dave Bush · Accepted Answer · 2016-02-22 15:23:24Z

2

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;

   });
});

answered Feb 22, 2016 at 15:23

Dave Bush

2,38217 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mantisimo Over a year ago

That was it! Thank you, cant believe I missed that!! Thanks again :)

Collectives™ on Stack Overflow

Angular decorator/extending UI Bootstrap Datepicker directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related