Bootstrap Toggle with Angular directive

Question

Я использую bootstrap toggle add on в проекте (http://www.bootstraptoggle.com), который основан на AngularJS. Структура, которая использует компонент примерно так, как:

<parent-directive> 
     <tr ng-repeat="myObject in dataSource"> 
     <child-directive> 
      <input id="myToggleButton" data-toggle="toggle" type="checkbox"> 

я сузил проблему с требованием бутстраповского переключения нуждающегося селектором JQuery для инициализации элемента управления, когда он создан динамически. Вызов выглядит примерно так:

$('#myToggleButton').bootstrapToggle(); 

Я пытался добавить этот селектор на событие «после» компилировать в моей директиве, но селектор не отображается в силе:

 post: function (scope, element, attributes, controller, transcludeFn) { 
      $('#myToggleButton').bootstrapToggle(); 

I Я добавил его к обработчику кнопок (просто чтобы проверить), который я вручную щелкнул и волшебным образом это работает. Очевидно, что некоторый момент, когда событие компиляции отправляется, но jQuery не работает, а затем в какой-то момент, когда обычные пользовательские операции начинаются там, где они есть.

К сожалению, для управления, по-видимому, требуется, чтобы этот селектор инициализировался, а строки данных, удерживающих этот переключатель, были созданы на лету, а не сразу, когда страница загружается.

Мой вопрос: в какой момент может работать селектор jQuery после завершения компиляции для директивы? Я также не предоставляю функцию связи, и я предполагаю, что мне тоже понадобится, так как эта функция меняет DOM, когда она вызывается.

Заранее благодарен!

Answer 1

Вы не можете повторять идентификаторы на странице, они уникальны по определению, вместо этого конвертируются в класс.

У вас не должно возникнуть проблем с инициализацией плагинов внутри link функция директивы. Если вы используете jQuery правильно с угловым, вы будете загружать jQuery до angular.js, так что angular.element использует jQuery вместо jQlite.

Тогда вы можете сделать:

link:function(scope,elem, attrs){ 
    elem.find('.myToggleButtonClass').bootstrapToggle({/* options*/}); 
} 

Answer 2

После elem.append, селектор JQuery работал как шарм.

template: '<div toggleTag="test"></div>', 
    replace: true, 
    link: function(scope, elem, attr, controller, transclude) { 
     elem.append('<input id="' + scope.toggleId + '" checked data-toggle="toggle" type="checkbox">'); 
     $('#' + scope.toggleId).bootstrapToggle(); 
    },