問題タブ [angularjs-compile]

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 投票する
0 に答える
359 参照

angularjs - Googleマップの情報ウィンドウで$ compile後にng-clickイベントが定義されていません

この角度のある Google マップ内で、ユーザーが住所を検索したときに生成される動的な情報ウィンドウにリンクを表示できるようにしたいと考えています。情報ウィンドウが正しく読み込まれるようになりましたが、ng-click イベントが未定義で戻ってきます。

HTML 文字列をコンパイルしましたが、まだ喜びがありません。コンパイルコードは次のとおりです。

マーカーが選択されている場合、情報ウィンドウは正常に読み込まれますが、情報ウィンドウ内で「ng-click」をクリックすると、次のように表示されます。

キャッチされていない TypeError: undefined は関数ではありません

コードを表示するための jsbin リンクを提供しました。

http://jsbin.com/zukefa/edit

よろしくお願いします。

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

angularjs - Angular 要素のコンパイル済み html を取得できますか?

$compile サービスを使用して要素をコンパイルしました。これを DOM に直接追加すると、見栄えがよくなり、すべてのバインディングが正しくなります。ただし、その要素を文字列として使用したい場合{{stuffHere}}は、バインディングの代わりに表示されます。コンパイル後に要素の html を取得する方法はありますか?

http://plnkr.co/edit/1sxvuyUZKbse862PieBa?p=preview

ボディに追加された要素が表示されますcontent is Hello, World!

アラートが表示されます<div><div><span ng-binding>{{content}}</span></div></div>

私がアラートから見たいのは<div><div><span ng-binding>Hello World</span></div></div>

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

javascript - AngularJS : API によって返された HTML 内のディレクティブをコンパイルします

したがって、ヒットしている REST API にアクセスできます。これは、次の事前生成された HTML を返します。

これは、AngularJS の学習において興味深い新しい課題を提示してくれました。私が作成した API ではないため、API から返される HTML を制御することはできません。

私がやろうとしていること (これは完全に間違ったアプローチかもしれません) は、「v」クラスにクラス ディレクティブを作成して、ng-click 属性を詩番号に追加し、詩情報を渡すことができるようにすることです。私のアプリケーションの別の部分に。

以下は私が現在持っているコードで、何もしないように見えますが、そうすると思っていました。

API によって返された HTML が取り込まれている HTML テンプレート:

だから私が望んでいたのは、HTMLがHTMLをバインドする下部のdivに取り込まれ、その後何らかの方法で$compileが呼び出されて、「v」クラスのsupを変更可能なディレクティブに変換することです。繰り返しますが、私は Angular にかなり慣れていないので、Angular の他のほとんどのものと同様に、まだ見つけていない非常に簡単な方法があるかもしれません。

実際、最終的な目標は、各節番号を独自のディレクティブに変換して、クリック可能にし、そこに含まれる id 属性にアクセスできるようにして、その情報をユーザー コンテンツとともに独自の API に送信できるようにすることです。

情報量が多い気がするので、不明な点があれば教えてください。私はそれに取り組んでいるので、最初にそれを理解したら、必ず答えを更新します.

進行中

この質問をチェックアウト: https://stackoverflow.com/a/21067137/1507210

今、詩が表示されているセクションをディレクティブに変換してから、検索コントローラーにサーバーからの HTML をスコープ変数に入力させ、それをテンプレートとして使用する方が理にかなっているのだろうかと思っています。ディレクティブについて...考える 考える 考える

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

angularjs - テンプレートがレンダリングされる前にディレクティブをコンパイルする

Angular で States Select のディレクティブを作成しています。それは機能していますが、DOM に入れる前にテンプレートをコンパイルする方法を見つけようとしてしばらく時間を費やしました。現在、次のように機能します。

ただし、テンプレートを要素に挿入し、スコープに対してコンパイルします。これを行うより良い方法はありますか?テンプレートを挿入する前にコンパイルするなど?

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

angularjs - AngularJS ディレクティブ - postLink の後で「テンプレート」関数を呼び出すことができます。

説明するのは複雑ですが、試してみます。

http://plnkr.co/edit/PrVXRvHAC7wtgHUEU1HB?p=preview

この例は必要に応じて機能しますが、これを達成した方法が気に入らないだけです。

例に示されていることを説明しようと思います。

<item>repeaterディレクティブは、自身をとして親に「登録」する必要がありavailable_itemます。そして、それは現時点では表示されるべきではありません。

<repeater>ディレクティブは、利用可能な項目のメニューを出力し、メニュー項目をクリックした後、項目のテンプレートをそのコンテンツに追加する必要があります。たとえば、repeaterテンプレートは次のようになります。

では、実際のplkr.co の例で何が気に入らないのでしょうか?

に含めなければなら<div ng-transclude></div>ないのは好きではありません。repeater.htmlそうし<item>ないと、がコンパイルされなくなります。しかし、ページの読み込み時にアイテムを印刷する必要はありません。それらは単なるテンプレートです。テンプレートを空の文字列に設定<items>しましたが、ソースに空の<item>タグが表示され、これが気に入りません..

何が嫌なのかわからないけど、全部そろってる感じhard-codedじゃない?

repeaterのディレクティブが次の順序でコンパイルされる場合:

  1. controller() - add2available() 関数が登録されます
  2. プレリンク()
  3. //今ではすべてのitemディレクティブに行き、リピーターに自分自身を登録することができます
  4. postLink()
  5. template() - リピーターがテンプレートを変更するようになりました。ng-transclude

私はそれを行うことは不可能だと確信しています。また、私のコードで何が気に入らないのかわかりませんが、私のコードを改善する他の方法を見つけていただければ幸いです。

どうもありがとうございました!

PS<item>ディレクティブをいくつかの<script type="text/ng-template" id="">タグに置き換えることができることはわかっていますが<item>、例で提供されているとおりにする必要があります。

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

angularjs - Angularjs で、for ループ内のすべての promise を完了した後にのみ、動的モデル名を使用してテンプレートのコンパイルを確実にする方法

Angularjs と c3 チャート ディレクティブを使用しています。私のテンプレートコンパイルコードは

for ループ内のすべての promise が完了した後にのみ、このテンプレート コンパイル コードを実行したいと考えています。どうすればそれを達成できますか?また、モデル名を動的に割り当てるために $scope[data.chartIdent] を使用しましたが、正しい方法ですか? 以下は私のコントローラーのサンプルコードです。

$q.all を使用して、テンプレートを動的に作成する方法。ここでは、for ループから外れているため、'i' 値はテンプレートに使用できません。

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

angularjs - pjax後にAngularJsが機能しなくなる

ページで AngularJs と Pjax の両方を使用しています。

ページの一部を Pjax でリロードすると、Angularjs がそこで動作しなくなります。

単純な {{ 2+2 }} は、pjax でリロードされた部分を除いてどこでも機能します。

問題は $compile の使用にあることがわかりました。

さまざまなコード スニペットを試しましたが、どれもうまくいきませんでした。

これも

これも

コードスニペットがうまくいきました。誰かが実用的な解決策を知っていますか?

UPD: $("body") を $(document.body) に変更するという PSL のアドバイスの後、コードが機能し始めました。しかし、今ではすべてが最初から初期化されており、pjax 呼び出しのたびにデータ (私の例では選択した画像) が失われています。どうすればこれを回避できますか?

これは私のjsファイルです: