Вызов функции jQuery для объекта, динамически созданного с помощью Angular

Question

Я использую this Bootstrap plugin, чтобы превратить флажок в пару кнопок. Он работает так, как ожидается, когда флажок установлен до загрузки страницы (часть исходного HTML-страницы); Однако, мне нужно работать, когда флажок динамически созданный Угловая, как это, когда editIndex устанавливается, как в функции ниже:

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

Когда я звоню функция выше, функция, которая на самом деле создает кнопки не вызываются; он кажется отложенным. Как я могу вызвать функцию, которая фактически создает кнопки на флажке, созданном после загрузки страницы?

Answer 1

Я думаю, вы должны быть в порядке, используя услугу $timeout, чтобы отсрочить выполнение $(":checkbox").checkboxpicker(); до тех пор, пока угловая не закончит визуализацию шаблона.

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>