Boostro.js与Angular.js和HTML内容

Question

我一直在尝试使用bootstro.js库在Angular中创建一个巡视。

它运作良好，除非HTML用于内容。 Angular指令（如ng-model和ng-change）不起作用，因为它在被bootstro.start（）调用之前不会被添加到DOM。

一个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>"> 

我希望看到：检查我！ （真或假），当我检查框时状态文本改变。

我试过使用$ compile创建一个指令，但我认为bootstro在之后渲染弹出框，所以它不起作用。这里是我的指令，在div与“boostro修复”使用：

.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); 
     } 
    }; 
}) 

如何在这个网站的角魔绑定任何想法？

Answer 1

只要bootstro打开弹出窗口，您就需要获得通知的方式，以便告诉Angular（通过$compile）发生了这种情况，并且应该将弹出窗口的内容与指令范围重新关联。

通过快速浏览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(); 
}