1

bootstro.jsライブラリを使用して、Angular 内でツアーを作成しようとしています。

コンテンツに HTML が使用されている場合を除いて、うまく機能します。ng-model や ng-change などの Angular ディレクティブは、bootstro.start() によって呼び出されるまで DOM に追加されないため、機能しません。

ブートストロがポップオーバーを表示する 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>">

私は見ることを期待しています：私をチェックしてください！(true または false) ボックスをオンにすると、状態のテキストが変化します。

$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でAngular Magicをバインドする方法についてのアイデアはありますか?

4

1 に答える 1

1

ブートストロがポップオーバーを開くたびに通知を受け取る方法が必要です。$compileこれにより、これが発生したこと、およびポップオーバーのコンテンツをディレクティブ スコープに再度関連付ける必要があることを ( 経由で) Angular に伝えることができます。

bootstro docs をざっと見てみると、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 に答える