角装饰器/扩展UI Bootstrap Datepicker指令 [英] Angular decorator/extending UI Bootstrap Datepicker directive

问题描述

我正在尝试扩展角度ui引导日期选择器指令.我的目标是能够覆盖datepicker指令的位置.定位发生在uibDatepickerPopupController内部的$ watch事件上，该事件绑定到uibDatepickerPopup指令.我在这里按照指南来装饰在这里具有映射控制器的指令. http://angular-tips.com/blog/2013/09/实验装饰指令/

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/

我遇到以下错误

TypeError:无法读取未定义的属性"length"

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>

和基本的角度控制器

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

推荐答案

可能还有其他问题，但我看到的一个问题是您需要从装饰器函数返回指令，因为Angular需要知道$中的哪个元素.您正在装饰的委托数组(是的，可能有多个)

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;

   });
});

这篇关于角装饰器/扩展UI Bootstrap Datepicker指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！