5

ブートストラップ ポップオーバーをトリガーしたいボタンがあります。ポップオーバーに別のディレクティブを含める必要があることを除いて、それは正常に機能します（基本的に、ポップオーバーにはアイテムのリストが含まれています）。

この記事http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-serviceを見つけましたが、それに従うのはうまくいかないようです。

カスタム ディレクティブを作成しました

.directive('popoverhtml', function ($compile) {
    return {
        restrict: 'A',
        transclude: true,
        template: "<span ng-transclude></span>",
        scope: {

        },
        link: function (scope, element, attrs) {
            console.log($(element));
            var options = {
                content: "<br><br>Hey",
                placement: "right",
                html: true,
                title: "HEY",
                trigger: "click"
            };
            $(element).popover(options);
        }
    }

以下は私のHTMLマークアップです

<button type="button" class="btn btn-primary btn-small" popoverHTML><i class="icon-white icon-plus"></i></button>

今のところ、私はそれにカスタムhtmlを渡していません（誰かがそれを行う方法を知っているなら、これについてもいくつかのガイダンスをいただければ幸いです）contentオプションオブジェクトのparamにハードコードされたhtmlでポップオーバーを表示させようとしています。

ただし、ボタンのあるビューが読み込まれるとすぐに (ボタンをクリックする前に)、次のエラーが発生します。

TypeError: Object [object Object] has no method 'popover'

私のgooglefuによると、これはかなり多くのことを意味する可能性があり、Angularのコンテキストでそれが何を意味するかについての洞察をいただければ幸いです。

ありがとうございました！

編集:私の JS のリストが含まれています。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>    
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.min.js"></script>   
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.4/angular-strap.min.js"></script>      
<script src="js/admin-angular.js"></script>  <-- My custom include
<script src="js/admin-jquery.js"></script>   <-- My custom include
<script src="js/jquery.watermark.min.js"></script>    
<script src="js/jquery.base64.js"></script>
4

2 に答える 2

3

AngularStrap Popoversを調べることをお勧めします。一般的には AngularUI をお勧めしますが、AngularStrap はポップオーバーのテンプレート パーシャルをサポートしていますが、AngularUI はサポートしていません。

AngularStrap を使用する場合は、ポップオーバーに表示される HTML パーシャルを記述するだけでよく、そのパーシャルには、通常の Angular パーシャルと同様に、好きなディレクティブを含めることができます。

于 2013-08-16T14:01:53.750 に答える
1

angularの前にjQueryをロードすると、問題が解決します。技術的には、問題はjQueryを2回ロードすることです（1つはangular、つまりjqLit​​eから、もう1つは後で別のjsファイルとしてロードされます）

ここで説明https://stackoverflow.com/a/8792470

于 2013-12-23T10:11:00.020 に答える