0

I have an ng-repeat rendering a directive, as the ng-repeat will be of unknown length I'm attempting to dynamically load a jquery plugin on click, via a directive.

I believe I'm quite close, however, only part of the plugin loads, and unfortunately no errors are given. For those familiar with the Pickadate plugin, the classes are being rendered on the input element, however the elements that it appends dynamically are not being rendered on click.

Here is my code:

HTML

<div class="calendar" add-calendar>Click to add calendar</div>

Angular Directive 1

agentApp.directive('addCalendar', ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            template = '<input type="text" jq-date-picker-range />';

            element.bind('click', function() {
                angular.element(this).after($compile(template)(scope));
            });
        }
    }
}]);

Angular Directive 2

agentApp.directive('jqDatePickerRange', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          angular.element(element).pickadate();
        }
    };
});

Output

<input type="text" jq-date-picker-range class="ng-scope picker__input picker__input--active" readonly="" id="P780839543" aria-haspopup="true" aria-expanded="true" aria-readonly="false" aria-owns="P780839543_root">

As you can see, the classes are being written, but the calendar div elements which are rendered thereafter are not doing so.

Any help is very much appreciated. Thanks.

4

1 回答 1

1

看起来问题是渲染问题。实际上，当我进行初始调用时，我假设负责渲染的线程很忙，因此插件向现有 DOM 元素添加类的能力是可用的，但是向 DOM 添加新元素是不可用的。我认为有比这个解决方案更好的方法——我很想听听。但是现在，将调用包装在 $timeout 函数中就可以了。

agentApp.directive('jqDatePickerRange', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

          $timeout(function() {
            angular.element(element).pickadate();
          }, 0);

        }
    };
}]);
于 2015-04-11T15:36:32.297 回答