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

我正在使用this Bootstrap plugin将复选框变成一对按钮。它在加载页面之前存在复选框（页面的部分初始HTML）时按预期工作;但是，我需要它，当一个复选框是动态的角度创建运行，因为它是当editIndex设置，如下面的功能：在Angular动态创建的对象上调用jQuery函数

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

当我致电上述函数，该函数实际创建按钮不被调用;它似乎被推迟。我怎样才能调用实际上在页面加载后创建的复选框上创建按钮的函数？

来源

2016-04-30 Andy

你可能想尝试的角度建立新的指令来创建按钮和复选框。 – choz

*复选框是动态创建的*表示它是通过循环创建的？或指令？请提供一些代码或小提琴谢谢 – kiro112

@ kiro112：它包含在脚本标签中，以便在角度创建模式时使用它。这就是为什么当第一次加载页面时，它不存在于DOM上。 – Andy

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

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

虽然为checkboxpicker创建自定义指令可能是更好的解决方案。像

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

然后用东西在它的模板一样<input type="checkbox" checkbox-picker>

来源

2016-05-02 07:43:12 noppa

第一种方法似乎并不奏效，但第二种方法确实奏效。谢谢！ – Andy

第二种方法是更加角度的做法。任何时候你想把自定义的javascript绑定到一个DOM元素上，做一个指令。 – photoionized

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

回答

相关问题