在 Angular 动态创建的对象上调用 jQuery 函数

【问题标题】：Call jQuery function on object dynamically created by Angular在 Angular 动态创建的对象上调用 jQuery 函数
【发布时间】：2016-04-30 00:10:04
【问题描述】：

我正在使用this Bootstrap plugin 将复选框变成一对按钮。当复选框在页面加载之前存在时，它按预期工作（页面初始 HTML 的一部分）；但是，我需要它在 Angular 动态创建复选框时运行，就像设置 editIndex 时一样，如下面的函数：

ModalController.prototype.edit = function($index)
{
    this.editIndex = $index;
    $(":checkbox").checkboxpicker();
}

当我调用上面的函数时，不会调用实际创建按钮的函数；它似乎被推迟了。如何调用在页面加载后创建的复选框上实际创建按钮的函数？

【问题讨论】：

您可能想尝试在 Angular 中创建新指令来创建您的按钮和复选框。
复选框是动态创建的表示它是通过循环创建的？还是指令？请提供一些代码或小提琴谢谢
@kiro112：它包含在脚本标签中，因此可以在 Angular 创建模态时使用。这就是页面第一次加载时它在 DOM 上不存在的原因。

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

我认为您应该可以使用 $timeout 服务来延迟 $(":checkbox").checkboxpicker(); 的执行，直到 angular 完成模板的渲染。

ModalController.prototype.edit = function($index)
{
    this.editIndex = $index;
    $timeout(function(){
        $(":checkbox").checkboxpicker();
    });
}

不过，为复选框选择器创建自定义指令可能是更好的解决方案。类似的东西

myApp.directive('checkboxPicker', function(){
    return {
        restrict: 'A',
        link: function(scope, el){
            $(el).checkboxpicker();
        }
    }
});

然后像<input type="checkbox" checkbox-picker>这样在模板中使用

【讨论】：

第一种方法似乎无效，但第二种方法有效。谢谢！
第二种方法是一种更加 Angular 的方式。任何时候你想要自定义 javascript 绑定到一个 DOM 元素，都可以创建一个指令。