1

I am using ui-bootstrap in my application, and I found that the ui.bootstrap.datepicker is really un-reusable. Since every date-picker have to work with a controller which control the appearance of the picker by change the isOpen property.

So I want to enhance the input with type of date by adding the required attributes and controller, and I found this post useful, this is what I have done now:

  function InputDirective($compile) {
    var addon =
      '<span class="input-group-btn">' +
      '<button type="button" class="btn btn-default" ng-click="inputCtrl.open()"><i class="glyphicon glyphicon-calendar"></i></button>' +
      '</span>';
    return {
      priority: 1000,
      restrict: 'E',
      controllerAs: 'inputCtrl',
      controller: function($scope) {
        var vm = this;
        this.open = function() {
          console.info("open");
          vm.isopen = true;
        }
      },
      compile: function(tElement, tAttrs) {
        if (tAttrs.type != "date")
          return;
        console.info(tElement);
        tElement.attr("datepicker-popup");
        tElement.attr("is-open", "inputCtrl.isopen");
        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {},
          post: function postLink(scope, iElement, iAttrs, controller) {
            iElement.after($compile(addon)(scope));
            $compile(iElement)(scope);
          }
        }
      }
    };
  }

However I found that compile function will be called infinity until the browser crash.

Live example(Note the tab may be crash):

http://plnkr.co/edit/m4i4Gs4zPff0q7ykpLcG

Is it possible to fix that?

Community
  • 1
  • 1
hguser
  • 35,079
  • 54
  • 159
  • 293
  • `$compile(iElement)(scope)` - this is triggering the infinite compile. Consider compiling `iElement.contents()` (i.e. children elements excluding the element with the directive itself) perhaps? – miqh Sep 23 '15 at 01:44
  • For elements like `input` does its `contents()` make sense? – hguser Sep 23 '15 at 01:53
  • Ah, probably not, the invalid HTML argument skipped my mind. Still, you don't want to be calling compile on the same element you're applying your custom directive on. If it's possible for your purposes, I guess you could apply your directive on a parent HTML element like a `
    ` and then compile the `` element underneath.
     – miqh Sep 23 '15 at 02:08
  • Possible duplicate of [Angular compile in directive seems to go into infinite loop](http://stackoverflow.com/questions/28914706/angular-compile-in-directive-seems-to-go-into-infinite-loop) – Paul Sweatte Nov 28 '15 at 06:06

0 Answers0