web-dev-qa-db-ja.com

一見正しい呼び出しにもかかわらず、angular-bootstrapモーダルダイアログが表示されない

angularコントローラーからモーダルダイアログを呼び出そうとしています。例は非常に単純で、それほど簡単ではありません。次のようなコードがあります。

$modal.open({
        template: '<div class="modal-body">Choose current project<button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>',
        controller: ModalChooseProjectCtrl
    });

制御機能は次のように宣言されています

var ModalChooseProjectCtrl = function($scope, $modalInstance) { 
         $scope.ok = function() {
        $modalInstance.close($scope.chosenProject);
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
};

ブートストラップのナビゲーションバーを含むdivに属するコントローラーの関数を使用して呼び出されます。

問題：その$ modal.open呼び出しを持つ関数を呼び出すと、エラーが表示されます

  Error: [$compile:tplrt] Template for directive 'modalBackdrop' must have exactly one root element. template/modal/backdrop.html 
  http://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$compile/tplrt?p0=modalBackdrop&p1=template%2Fmodal%2Fbackdrop.html


  Error: [$compile:tplrt] Template for directive 'modalWindow' must have exactly one root element. template/modal/window.html
  http://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$compile/tplrt?p0=modalWindow&p1=template%2Fmodal%2Fwindow.html

これらのエラーは、テンプレートは、いわば、1つのhtmlルート要素にラップされていることを示しています。これは明らかにテンプレートからのものです。さらに、呼び出し後、次の要素がコードに表示されていることがわかります

 <div modal-backdrop="" class="ng-scope"></div>
 <div modal-window="" index="0" animate="animate" class="ng-scope"></div>

さらにクリックすると、より多くのモーダルウィンドウがコードに表示されます。しかし、画面がジャンプするだけで何も起こらず、モーダルダイアログが表示されません。 Plunkerにいる間、ダイアログの呼び出しコードはそれをうまく示しています（ http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw 、しかしそれは単なる基本的な呼び出しルーチンです。）

javascriptangularjstwitter-bootstrapangular-ui-bootstrap
18
Askar Ibragimov

これは、angular-uiテンプレートが提供されていない場合の一般的な問題です。

Angular-uiの最新バージョンには、次の2つのバリエーションがあります。ui-bootstrap.jsおよびui-bootstrap-tpls.js。 最後のものだけを使用する必要があります。

提供されるエラーは、ディレクティブのテンプレートに関するものではなく、angular-ui自体の一部であるmodalBackdropおよびmodalWindowディレクティブのテンプレートに関するものです。通常、Angularはテンプレートを見つけることができず、404エラーなどのHTMLコードを取得するHTTP GETリクエストを作成できません。ルート要素が多数あるため、このようなエラーが発生するのはそのためです。HTTPを確認してくださいのページ読み込み時のリクエスト。

53
Maxim Demkin

コントローラの依存関係（openを呼び出す関数をもたらすもの）として$ templateCacheを含めることで、これを解決しました。ただし、$ modalがその依存関係自体に追いつかない理由はわかりません。

3
Askar Ibragimov

$ templateCache.removeAll（）を呼び出した場合、これらのエラーが発生する可能性があります。 i.bootstrapモジュールに必要なテンプレートがテンプレートキャッシュに保存されているため、キャッシュをクリアするとテンプレートが見つからなくなると思われます。

2
nmgeek

フロントエンドの依存関係にバウアーを使用しています。

Angular-Bootstrap FAQで推奨されているように、

依存関係の注入を「ui.bootstrap.modal」から「ui.bootstrap」に変更しました

そんな感じ ：

angular.module('myApp', ['ui.bootstrap']).run(...
0
Tony

私の場合、これらのエラーは、応答データを処理するカスタムhttpインターセプターのバグが原因でした。

0
beholderrk