問題タブ [angular-template]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
922 参照

angularjs - Angular カスタム ディレクティブ (ネストされた ng-repeat 内) の動的テンプレートが機能しない

私は一般的にAngular/JSフレームワークの初心者であり、動的テンプレートを使用してこの飛行機の座席データを表示しようとしていますが、機能していません。

このサイトのガイドに従ってみましたが、うまくいきませんでした。

「row.seats」がオブジェクト リテラルで、「row.rowLetter」が文字列の html は次のとおりです。

これが私の指示です:

$scope.rows を設定しているコントローラーがありますが、このすべてのロジックをディレクティブに移動しようとすると (元々ビューで ng-ifs を使用していました)、機能しなくなりました。私が言えることから、私はリンカー関数の中にさえ入っていません(ディレクティブを入力していますが)。

リソースへのヘルプやリンクをいただければ幸いです。

0 投票する
3 に答える
4660 参照

angularjs - ローカルのプリロード (JST) テンプレート キャッシュからの ng-include パーシャルのロード

私は自分のテンプレートを javascript 文字列配列にプリロードしていvar t = JST['firstTemplate']ますt

このプリロードされたテンプレートをng-includeディレクティブで使用するにはどうすればよいですか?

このシナリオのテンプレートは、ネストされたビューとテンプレート、および独自のネストされたスコープとコントローラーを使用して、より複雑になる可能性があることに注意してください。ng-bind ディレクティブのいずれかが役立つかどうかはわかりませんか?

アップデート:

そのソースを見ると、ng-includeこれを行う良い方法は、テンプレートの読み込みロジックをカスタマイズ可能なプロバイダーに分離することです。

現在のデフォルトの読み込みメカニズムは、キャッシュ プロバイダーとして単純に実行$http.getします。$templateCacheテンプレート コンテンツをテンプレート キャッシュに挿入できるようですがJST['firstTemplate']、すべてのテンプレートについて、起動時にそれを行う必要があります。

そして、

また、すべての ng-include と並行して、このテンプレートの事前キャッシュを行うカスタム ディレクティブを作成することもできます。それはまた不格好に思えます。

更新 #2

すでにプリロードされている JST ハッシュを使用するように、templateCache をオーバーライドしてみます。これが機能する場合、結果を投稿します。

0 投票する
1 に答える
676 参照

javascript - AngularJS - プリロードされたテンプレートがディレクティブで機能しない

すべてのテンプレートを script タグ内に配置し、ajax リクエストを使用せずにディレクティブから使用したいと考えています。

これは私のテンプレートです:

これは私の指示です:

ロード時に、コンソールに次のエラーが表示されます。

そして、ブラウザがそれを取得しようとしていることがコンソールに表示されhttp://localhost/articles/article_row.html ますが、ページでそれを探す代わりに、私は何か間違ったことをしていますか?

ありがとう!

0 投票する
3 に答える
1834 参照

angularjs - AngularJS templateUrl とテンプレート - スコープの分離

次のディレクティブがあります。

Karma + Jasmine を使用してこのコードをテストすると、動作します。しかし、templateUrl (現在はコメントアウトされています) に切り替えると、機能しません。この問題を示すために、単純なプランカーを作成しました。sorter ディレクティブと bsorter ディレクティブを比較すると、テンプレートの代わりに templateUrl を使用すると、コンパイルされた要素での isolateScope() 呼び出しが壊れているように見えます。何か案は?

0 投票する
2 に答える
657 参照

javascript - 上書きではなくコンテンツを追加するAngularディレクティブ

データがサーバーからフェッチされている間に、div に「読み込み中」メッセージを表示するディレクティブを作成しようとしています。

これまでのところ、私はこれを得ることができました:

loadingPanelBox.html には次のようなものがあります。

これは実際に私が望むことのほとんどを行います。データが返されるまでパネルが表示され、その時点でパネルは消えます。

残念ながら、配置されている div の内容も上書きするため、この場合は次のようになります。

Hello Thereは見られません。これは、テンプレートを使用した機能のようです。

この上書きの発生を止める方法や、テンプレート以外のコンテンツを追加する方法はありますか?

0 投票する
2 に答える
1000 参照

javascript - angularディレクティブは常に属性を外側の要素のラッピングに追加します

私は角度が初めてで、これで壁に頭をぶつけています:

ラベルにラップされた input type="range" を生成する再利用可能なスライダー要素を作成しています。

ディレクティブで定義された属性を、ディレクティブのテンプレートで定義された子入力要素に適用する必要がありますが、それらはラッピング ラベル要素にも追加されます。これは面倒なようで、基本的なものが欠けていると思います。

これを行う最善の方法は何ですか?コンパイル機能を使用する必要がありますか?それは、ディレクティブにテンプレートを含める目的を無効にするように思われますか?

現在のhtml:

現在のディレクティブ:

});

現在の出力:

望ましい出力:

0 投票する
3 に答える
2678 参照

javascript - AngularJs テンプレートの $scope 変数のショートカット

私のコントローラーでは、次を割り当てます。

そして、私のテンプレートでは時々必要です

そして時折

したがって、次のようなテンプレートでこの変数のショートカットを直接作成できるかどうか疑問に思っていました。

こんな風に使えるように{{response.hello}}

一般に、テンプレートから一時変数を割り当てることは可能ですか? データバインディングは必要ありません。テンプレートを生成するためだけに必要であり、その後永久に消える可能性があります