Question

我试图扩展角度ui引导日期选择器指令。我的目标是能够覆盖datepickerdirective的定位。定位发生在uibDatepickerPopupController内的$ watch事件中，该事件绑定到uibDatepickerPopup指令。我按照这里的指南来装饰一个带有映射控制器的指令。 http://angular-tips.com/blog/2013/09/experiment-decorating-directives/

我收到以下错误

TypeError：无法读取属性＆＃39;长度＆＃39;未定义的

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

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

这是我尝试覆盖行为

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

可能还有其他问题，但我看到的是你需要从装饰器函数返回指令，因为Angular需要知道你正在装饰的$ delegate数组中的哪个元素（是的，可能有多个）< / p>

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装饰器/扩展UI Bootstrap Datepicker指令

1 个答案: