0

ブートストラップ ポップオーバー コンポーネントをラップするディレクティブをセットアップしようとしています。私の問題は、詳細リストが補間されるのを待つようにリンク機能を作成することです。

そうするために、これは私のHTMLです：

<div class="popover fade top in">
    Blah blah
    <br />
    <span ng-repeat="detail in details" >
        {{ detail.title }}
    </span>
</div>

<div my-popover>
    My text line that opens the popover on mouseover.
</div>

そして私の指令：

portalModule.directive('myPopover', function ($compile, $interpolate) {
    return {
        restrict: 'A',
        replace : false,
        link: function (scope, element, attributes) {
            var updateLater = function () {
                var popoverHtml = $(element).siblings('.popover').html();

                var options = {
                    html: true,
                    trigger: 'hover',
                    content: popoverHtml
                };

                $(element).popover(options);
            }

            setTimeout(updateLater, 2000);
        }
    }
});

これは今のところ、私が見つけた最良の（唯一の）方法です。
- $watch を使用してみましたが、「詳細」リスト全体が補間されるまで待機させる方法が見つかりませんでした。
- Angular.UI はリッチ (html) ポップオーバーをまだ管理していないようです。

それを管理する方法についてのアイデア/リードはありますか?

[編集] ここに私の問題のプランカー ( http://plnkr.co/edit/Rn2SBaiGNz4mj0F80IT3 ) があり
ます:

4

2 に答える 2

1

私はちょうど同様の状況に出くわしました。私はあなたと同様のソリューションを使用しましたが、 $timeout サービスを使用しただけです。パラメータとして渡される関数内のコードは、次のダイジェストの後に実行されるため、2 秒待つ必要はないと思います。

  $timeout(function() {
..this will run after interpolation
}

この手法を使用したコードは次のとおりです

portalModule.directive('myPopover', function ($timeout) {
    return {
        restrict: 'A',
        replace : false,
        link: function (scope, element, attributes) {
            $timeout(function () {

                var popoverHtml = $(element).siblings('.popover').html();

                var options = {
                    html: true,
                    trigger: 'hover',
                    content: popoverHtml
                };

                $(element).popover(options);
            });
        }
    }
});
于 2014-08-13T10:26:49.990 に答える