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

Question

我正在使用 this Bootstrap plugin将复选框变成一对按钮。当复选框在加载页面之前存在时(页面初始 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>