Boostro.js с Angular.js и содержимым HTML

Question

Я пытался использовать библиотеку bootstro.js для создания тура в пределах Angular.

Работает хорошо, за исключением случаев, когда HTML используется для контента. Угловые директивы, такие как ng-model и ng-change, не работают, потому что они не добавляются в DOM до вызова bootstro.start().

Пример DIV, где bootstro покажет поповер:

<div class="bootstro" data-bootstro-title="My popover" data-bootstro-html="true" data-bootstro-content="<div class='checkbox'><label><input type='checkbox' value='' ng-model='checktest'>Check me! {{checktest}}</label></div>"> 

Я ожидал увидеть: Проверьте меня! (true или false), когда текст состояния изменяется, когда я устанавливаю флажок.

Я попытался создать директиву с использованием компиляции $, но я думаю, что bootstro отображает popover после компиляция происходит, поэтому это не помогает. Вот моя директива используется с «boostro затруднительного» в DIV:

.directive('bootstroFix', function($compile) {  
    return { 
     restrict: 'A',  
     link: function(scope, element, attrs) { 
     element.val("data-bootstro-content=" + $compile(attrs.content)(scope)); 
     $compile(attrs.content)(scope); 
     } 
    }; 
}) 

Любые идеи о том, как связать угловую магии в этом HTML?

Answer 1

Вам нужен способ получить уведомление, когда bootstro открывает popover, чтобы вы могли сообщить Angular (через $compile), что это произошло, и что он должен повторно связать содержимое popover с областью действия.

С быстрым просмотром документов bootstro есть обратный вызов onStep, который вы можете предоставить в своем объекте конфигурации.

ли что-то вроде этого:

link: function(scope, element, attrs) { 
    var recompile = function() { 
    // timeout to let bootstro render 
    $timeout(function() { 
     // get the popover bootstro inserted into the DOM 
     var popoverEl = $('.bootstro').parent().find('.popover'); 
     $compile(popoverEl)(scope); 
    }, 50); 
    }; 

    bootstro.start(element, { 
    onStep: recompile 
    }); 

    // for the first popover 
    recompile(); 
}