Boostro.js 与 Angular.js 和 HTML 内容

Question

我一直在尝试使用 bootstro.js 库在 Angular 中创建游览。

它运行良好，除非将 HTML 用于内容。 ng-model 和 ng-change 等 Angular 指令不起作用，因为在 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-fix”一起使用：

.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 打开弹出框时获得通知，以便您可以告诉 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();
}