1

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

它运行良好，除非 HTML 用于内容。诸如 ng-model 和 ng-change 之类的 Angular 指令不起作用，因为在 bootstro.start() 调用之前它不会添加到 DOM 中。

bootstro 将显示弹出框的 div 示例：

<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中绑定角度魔法的任何想法？

4

1 回答 1

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();
}
于 2014-12-04T03:31:27.697 回答