在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函數

回答

相關問題