Angular 指令仅动态加载 jQuery 插件（pickadate）的一部分

Question

我有一个 ng-repeat 呈现一个指令，因为 ng-repeat 的长度未知我正在尝试通过一个指令在点击时动态加载一个 jquery 插件。

我相信我已经很接近了，但是，只有部分插件加载，不幸的是没有给出错误。对于那些熟悉 Pickadate 插件的人来说，类会在输入元素上呈现，但是它动态附加的元素不会在点击时呈现。

这是我的代码：

HTML

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

Angular 指令 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 指令 2

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

输出

<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">

如您所见，正在写入类，但随后呈现的日历 div 元素并未写入。

非常感谢任何帮助。谢谢。

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

        }
    };
}]);

Angular 指令仅动态加载 jQuery 插件（pickadate）的一部分

Angular directive is only loading part of jQuery plugin (pickadate) dynamically

jquery-plugins

angularjs

angularjs-directive

pickadate