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

Question

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

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

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

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