2

Rails で作成されたテンプレートがあります。application.html.erb に Bootstrap ツールチップを配置すると問題なく動作しますが、AngularJS によって部分的にロードされたテンプレートに配置すると動作しません。

アプリケーション.js.コーヒー

jQuery ->
    $("a[rel~=popover], .has-popover").popover()
    $("a[rel~=tooltip], .has-tooltip").tooltip()

application.html.erb

<a href="#" class="has-tooltip" title="tooltip">hover over me for a tooltip</a>

上記は、期待どおりにどのページでも機能します。

/app/assets/templates/guides/show.html.erb

<a href="#" class="has-tooltip" title="tooltip">hover over me for tooltip </a>

上記のテンプレートは、application.html.erb ファイルの AngularJS "ng-view" ディレクティブによって読み込まれます。

<div id="ng-app" ng-app="Guide" ng-view >
    <!-- angular templates load here -->
</div>

適切な AngularJS ルートがここでロードをトリガーしています。

when('/guides/:id', {
    templateUrl:'<%= asset_path("guides/show.html") %>',
    controller: 'VideoDetailCtrl'
});

両方のリンクを含むページを表示すると、application.html.erb が提供するツールチップは機能しますが、show.html.erb のツールチップは機能しません。

タイミングの問題のようです。最初のツールチップの読み込みと添付は正常に行われますが、AngularJS テンプレートまたは部分が読み込まれる前です。どういうわけか、ツールチップ テンプレートの添付をトリガーする必要があり、パーシャルが読み込まれますよね?

このブログ投稿では、jQuery をパーシャルにアタッチする方法について説明していますが、かなりバロックに見えます。を置き換えるために使用onloadします。ng-includeng-view

http://blog.ruedaminute.com/2012/02/angular-js-applying-jquery-to-a-loaded-partial/

特にツールチップは最終的な DOM に添付する必要がある多くのものの 1 つにすぎないため、これを行うためのより一般的な Angular の方法があるのだろうか?

4

1 に答える 1

3

実際、 Angular-UIが答えです。愚かなことに、私は標準の Bootstrap と同じマークアップと同じスクリプトを使用していました。私がしたことは、Angular-UI から ui.boosttrap をインクルードし、マークアップを次のように変更することだけでした。

<a href="" tooltip-placement="right" tooltip="On the Right!">angular-ui tooltip</a>

app.js またはモジュールの依存関係を追加する場所には、以下を配置する必要があります。

angular.module('myModule', ['ui.bootstrap']);

ところで、0.6.0 バージョンは最新の AngularJS (この執筆時点では 1.2 rc3) と競合するため、ui-bootstrap の 0.5.0 までバックアップする必要がある場合があります。

于 2013-10-31T18:13:24.940 に答える