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

【问题标题】：Angular directive is only loading part of jQuery plugin (pickadate) dynamicallyAngular 指令仅动态加载 jQuery 插件（pickadate）的一部分
【发布时间】：2015-04-10 14:41:40
【问题描述】：

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

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

这是我的代码：

HTML

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

角度指令 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));
            });
        }
    }
}]);

角度指令 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 元素没有这样做。

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

【问题讨论】：

标签： angularjs jquery-plugins angularjs-directive pickadate

【解决方案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);

        }
    };
}]);

【讨论】：