如何为ui-bootstrap datepicker创建angularJs包装器指令？

Question

我使用ui.bootstrap.datepicker指令来显示一些日期字段.然而,大多数时候我需要相同的设置:我希望它带有一个弹出按钮和一个弹出按钮,我也想要文本的德语名称.这确实为按钮和文本以及格式反复创建了相同的代码,因此我编写了自己的指令以防止自己重复自己.

这是我的指令的一个plunkr.但是我似乎做错了.如果您使用不使用我的指令的"日期1"日期选择器选择日期选择器的日期一切正常.我期望日期2相同,但不是根据我在输入字段中提供的模板(或我预期的任何其他值)显示.toString()日期,而是显示日期对象的表示(例如Fri Apr 03 2015 00:00:00 GMT+0200 (CEST)).

这是我的指示:

angular.module('ui.bootstrap.demo').directive('myDatepicker', function($compile) {
  var controllerName = 'dateEditCtrl';
  return {
      restrict: 'A',
      require: '?ngModel',
      scope: true,
      link: function(scope, element) {
          var wrapper = angular.element(
              '<div class="input-group">' +
                '<span class="input-group-btn">' +
                  '<button type="button" class="btn btn-default" ng-click="' + controllerName + '.openPopup($event)"><i class="glyphicon glyphicon-calendar"></i></button>' +
                '</span>' +
              '</div>');

          function setAttributeIfNotExists(name, value) {
              var oldValue = element.attr(name);
              if (!angular.isDefined(oldValue) || oldValue === false) {
                  element.attr(name, value);
              }
          }
          setAttributeIfNotExists('type', 'text');
          setAttributeIfNotExists('is-open', controllerName + '.popupOpen');
          setAttributeIfNotExists('datepicker-popup', 'dd.MM.yyyy');
          setAttributeIfNotExists('close-text', 'Schließen');
          setAttributeIfNotExists('clear-text', 'Löschen');
          setAttributeIfNotExists('current-text', 'Heute');
          element.addClass('form-control');
          element.removeAttr('my-datepicker');

          element.after(wrapper);
          wrapper.prepend(element);
          $compile(wrapper)(scope);

          scope.$on('$destroy', function () {
              wrapper.after(element);
              wrapper.remove();
          });
      },
      controller: function() {
          this.popupOpen = false;
          this.openPopup = function($event) {
              $event.preventDefault();
              $event.stopPropagation();
              this.popupOpen = true;
          };
      },
      controllerAs: controllerName
  };
});

这就是我使用它的方式:

<input my-datepicker="" type="text" ng-model="container.two" id="myDP" />

(概念灵感来自这个答案)

我正在使用角度1.3(因为我只是从angular-ui-bootstrap datepicker文档中分叉了plunker,所以它是1.2 .我希望这没有任何区别.

为什么输入中的文本输出错误,如何正确完成？

更新

与此同时,我取得了一些进展.在阅读了有关编译和链接的详细信息之后,在这个plunkr中我使用编译函数而不是链接函数来执行我的DOM操作.我对这些文档的摘录感到有些困惑:

注意:如果已克隆模板,则模板实例和链接实例可能是不同的对象.因此,除了适用于编译函数中所有克隆DOM节点的DOM转换之外,执行任何操作都是不安全的.具体来说,DOM侦听器注册应该在链接函数中完成,而不是在编译函数中完成.

特别是我想知道"适用于所有克隆的DOM节点"是什么意思.我原本认为这意味着"适用于DOM模板的所有克隆",但似乎并非如此.

无论如何:我的新编译版本在chrome中运行良好.在Firefox中我需要首先使用日期选择器选择一个日期,之后一切正常(如果我在日期选择器的日期解析器中将 undefined更改为null(plunkr),Firefox的问题就解决了).所以这也不是最新的事情.另外我使用ng-model2而不是ng-model在编译期间重命名.如果我不这样做,一切都会被打破.仍然不知道为什么.

Answer 1

说实话,我不太清楚为什么它会导致你的日期在输入中显示之前是什么导致你的日期"toString-ed".

但是,我确实找到了重构你的指令的地方,并删除了许多不必要的代码,例如$compile服务,属性更改,范围继承,require指令等等.我使用了隔离范围,因为我不认为每个指令的用法都应该知道父范围,因为这可能会导致恶性错误.这是我改变的指令:

angular.module('ui.bootstrap.demo').directive('myDatepicker', function() {
  return {
      restrict: 'A',
      scope: {
          model: "=",
          format: "@",
          options: "=datepickerOptions",
          myid: "@"
      },
      templateUrl: 'datepicker-template.html',
      link: function(scope, element) {
          scope.popupOpen = false;
          scope.openPopup = function($event) {
              $event.preventDefault();
              $event.stopPropagation();
              scope.popupOpen = true;
          };

          scope.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            scope.opened = true;
          };

      }
  };
});

您的HTML使用情况变为:

<div my-datepicker model="container.two" 
                   datepicker-options="dateOptions" 
                   format="{{format}}"  
                   myid="myDP">
</div>

编辑:将该id参数添加到指令中.Plunker已更新.

Plunker

Answer 2

将这两行添加到指令定义时,您的指令将起作用:

return {
    priority: 1,
    terminal: true,
    ...
 }

这与指令的执行顺序有关.

所以在你的代码中

<input my-datepicker="" type="text" ng-model="container.two" id="myDP" />

有两个指令:ngModel和myDatepicker.优先级可以在ngModel之前执行自己的指令.