55

私は現在bootstrap-UI、自分のマシンでローカルでAngularをテストしています。アコーディオンとダイアログボックスの例を再現しようとすると。テンプレートがないことを示すこのエラーメッセージがコンソールに表示されます。

エラーの例：404が見つかりません-localhost / angle / template / message.html

ui-bootstrap-0.1.0.jsディレクティブを調べるときは、テンプレートがありURLます。

templateURLディレクティブの目的は何ですか？

これらのテンプレートは、Angular bootstrap-UIzipファイル全体をダウンロードするときに含まれると想定されていますか？

ヘッダーに含める必要のある他のファイルがありませんか？

<link rel="stylesheet" href="includes/css/bootstrap.css">
<script src="includes/js/angular.js"></script>
<script src="includes/js/ui-bootstrap-0.1.0.js"></script>
4

7 に答える 7

112

2つの選択肢があります。

  1. 独自のテンプレートを作成せず、組み込みのテンプレートが必要な場合は、ui-bootstrap-tpls-0.1.0.jsファイルをダウンロードする必要があります。これにより、すべてのテンプレートが挿入され、アプリに事前にキャッシュされます：https ://github.com/angular-ui /bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322

  2. 独自のテンプレートを作成する場合templatesは、アプリにフォルダーを作成し、angular-ui/bootstrapプロジェクトからテンプレートをダウンロードします。次に、自分でカスタマイズしたいものを上書きします。

詳細はこちら：https ：//github.com/angular-ui/bootstrap/tree/gh-pages#build-files

編集：

また、bootstrap-tpls.jsをダウンロードし、AngularJSデコレータを使用してディレクティブのtemplateUrlを変更し、ディレクティブのtemplateUrlの一部を独自のもので上書きすることもできます。のdatepickerのtemplateUrlを変更する例を次に示します。

http://docs.angularjs.org/api/AUTO.$provide#methods_decorator

myApp.config(function($provide) {
  $provide.decorator('datepickerDirective', function($delegate) {
    //we now get an array of all the datepickerDirectives, 
    //and use the first one
    $delegate[0].templateUrl = 'my/template/url.html';
    return $delegate;
  });
});
于 2013-02-19T16:10:59.613 に答える
67

この問題で2時間を無駄にした後の私の5セント。あなたがすべき：

  1. http://angular-ui.github.io/bootstrap/にアクセスします。カスタムビルドの作成をクリックして、使用する機能を選択します。（1つのアイテムに対して60kを引く意味はありません）。
  2. custom.tpls.js私の場合に含めてくださいui-bootstrap-custom-0.10.0.min.js
  3. あなたのAngularモジュールに'ui.bootstrap.yourfeature'は私の場合は含まれていました'ui.bootstrap.modal'

  4. また、を含みます 'ui.bootstrap.tpls'。したがって、私のモジュールの完全な依存関係は次のようになります。

    var profile = angular.module("profile",[ 'ui.bootstrap.modal', 'ui.bootstrap.tpls' ]);

  5. 2時間を節約して幸せになりましょう:-)。
于 2014-06-13T16:24:00.240 に答える
12

このエラーメッセージは、次のシナリオで示されているように、別のシナリオでも発生するようです：http: //plnkr.co/edit/aix6PZ?p=preview

モジュールの依存関係を「ui.bootstrap」ではなく「ui.bootstrap.dialog」のみと指定すると、Angularはテンプレートが見つからないというエラーを発生させます。

「理由」の公式説明は次のとおりです： https ：//github.com/angular-ui/bootstrap/issues/266

于 2013-03-25T17:30:23.543 に答える
9

index.htmlで両方の必要なスクリプトが定義されていましたが、同じエラーに直面していました。最後に、ui-bootstrap.jsスクリプトを最初にロードし、その後ui-bootstrap-tpls.jsをこのようにロードするように設定して、ロード順序を変更しました。これで問題は解決しました。ただし、後で（上記でコメントしたように）必要なライブラリは1つだけであることに気付きました。そこで、ui-bootstrap.jsを削除しました。

于 2013-09-13T16:01:39.723 に答える
1

私の問題は、次のように、まだHTMLにtemplate-urlを含めていることでした。

<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">

これにより、ブラウザがハングしました。これは奇妙なことですが、そのようになりました。

要約すると、私がしたこと：

bower install bootstrap --save
bower install angular-bootstrap --save

私のindex.html（「-tpls」に注意）：

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

次に、私のAngularアプリで：

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

次に、HTMLのtemplate-urlを削除します。

<div uib-accordion-group class="panel-default" heading="Custom template">

ブーム、動作します。

于 2016-10-15T19:17:53.763 に答える
0

この問題の考えられる原因は受け入れられた回答ですが、この問題のもう1つの考えられる原因は、私が遭遇したものであり、他の誰かが問題の同じ二次的な原因に遭遇した場合に備えて投稿したいと思いました。

症状はまったく同じで、ブートストラップテンプレートでは404でしたが、私の場合、実際には「ui-bootstrap-tpls.min.js」javascriptファイルを含めました。問題は、非テンプレートバージョンの「ui-bootstrap.min.js」も含めたことです。両方が含まれ、順序が重要であると私が思うと、一方が他方を置き換えます。私の場合、非テンプレートバージョンがテンプレートバージョンに置き換わり、404の問題が発生しました。

'ui-bootstrap-tpls.min.js'のみを含めるようにしたら、すべて期待どおりに機能しました。

于 2015-11-02T00:39:18.647 に答える
0

コメントを読んで、昨夜の10時間からの私の経験を追加する必要があります。UI Bootstrapは避けてください。それは、その価値よりもはるかに手間がかかるようです。

また、彼らのレポの問題とコメントを読んだことで、プロジェクトが実施された全体の方法は、シンプルで使いやすいツールと対立しているようです。それは最善の意図で始まったと確信していますが、おそらくこれは可能な限り避けるべきモジュールです。

もちろん、これは意見であるという警告があります。おそらく、他の人が同じように感じているかどうかを調べるでしょう。

于 2015-11-18T09:29:53.697 に答える