問題タブ [angularjs-compile]

テンプレートを構成オブジェクトのプロパティとして受け取り、そのテンプレートをヘッダーとフッターで囲まれた回数だけ表示するカスタム ディレクティブを作成しようとしています。そのようなディレクティブを作成する最善の方法は何ですか?

ディレクティブは、構成オブジェクトをスコープ オプションとして受け取ります。

このオブジェクト (config と呼ばれる) は、上記のコードに示されているように、オプションで双方向バインディングを使用してディレクティブに渡されます。構成オブジェクトには、テンプレートと、ディレクティブがテンプレートを表示する回数を示す数値を含めることができます。たとえば、次の構成オブジェクトについて考えてみます。

ディレクティブに渡されると、ディレクティブは (ng-repeat を使用して) テンプレートを 5 回表示します。ディレクティブは、テンプレートの上下にヘッダーとフッターも表示します。

このディレクティブを実装する最良の方法は何ですか? 注: 返信するときは、Plunker などのコード プレイグラウンドで実際に動作する例を提供してください。これまでに調べた実装のそれぞれで問題が発生したためです。

Update、私が調査したソリューションには次のものがあります。

1. ディレクティブの link 関数を使用して、ヘッド、ng-repeat を含むテンプレート、およびフッターを追加します。これは、何らかの理由でテンプレートが繰り返されないという問題に悩まされており、ソリューション全体がハックのように見えます。
2. 構成オブジェクトからのテンプレートを、ディレクティブ自体のテンプレートの途中に挿入します。jqLit​​e は jQuery ベースの API から CSS セレクターのすべての概念を削除したように見えるため、これは難しいことがわかります。
3. テンプレートを構築するための compile 関数の使用。これは私には正しいように思えますが、うまくいくかどうかはわかりません。

$compile文字列にいくつかのディレクティブを含む html を作成し、これをサーバーに送信したいと考えています。一部のディレクティブには が含まれているtemplateUrlため、返されるリンク関数は遅延します。この質問 ( AngularJS: Using $compile on html that contains directives with templateurl ) では、問題は解決されたよう$scope.$digest()ですが、私の場合は不可能です (既に進行中です)。

私が見つけた唯一の解決策は、タイムアウトを使用することです。http://plnkr.co/edit/k3ZAYy1FhGUFXxXyrPvB?p=previewを参照してください

遅延リンク機能の完了を待つより良い方法はありますか?

ユーザーがボタンをクリックしたときにモーダルを表示するディレクティブを作成しています:

ディレクティブ テンプレート:

ディレクティブの使用法:

したがって、ディレクティブをコンパイルする前に、コンテンツを取得してボタンを表示し、ユーザーがボタンをクリックすると、<div id="modal-content">....

コンパイルしてテンプレートに置き換える前に、ディレクティブの内部コンテンツを取得する方法

次のコードは、このようなエラーを作成します

キャッチされていないエラー: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=subCtrl&p1=not%20a%20function%2C%20got%20undefined

どうすれば修正できますか？

サンプルコードはこちら http://plnkr.co/edit/i3KmuFd09puvCyfqoX39?p=preview

index.html

sub.html

偽のコンテキスト メニューを提供するために一部の HTML をトランスクルージョンするディレクティブがあります。使用法は次のとおりです。

#my-elementこれにより、右クリックでコンテンツが表示されるイベントリスナーがバインドされ、context-menuオフセット$scope.getOffsetが返されます。

補間された文字列が展開されないことを除いて、すべてが機能{{ label }}します。$scope.labelの値が であるとしましょう'ABC'。「ABC」の代わりに「{{ label }}」が表示されます。ただし、ngClick は正しくバインドされているようです。

コードとデモについては、この plunkr を参照してください: http://plnkr.co/edit/QDVAHkhrfsNpRcjTwCpM?p=preview

どうしてこれなの？

私は次のplunkrを持っています:

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

私がやりたいことは次のとおりです。説明付きのjsonを指定して、フォーム内で自動的に入力を生成する角度コードを作成したいと思います例：

そのために、入力をタグに追加するカスタム ディレクティブを使用しています。

ターン

そして、minlength や maxlength などの他の検証属性を追加します。

私の plunkr では、次のように custominput タグに属性を追加できます。

しかし、これらの属性を入力タグ (つまり、custominput の子) に追加するにはどうすればよいですか??

更新 1

この質問は次のように要約できます。

ディレクティブから角度ディレクティブを使用して HTML 要素/属性を追加するにはどうすればよいですか

例：これを回す

これに：

指令から

背景情報を簡単に紹介します。Angular 1.4 にアップグレードしました。サーバー側の呼び出しに C# で記述された API を使用しています。

マイページのセクションに 2 つの選択リスト (プロジェクトとサブプロジェクト) が表示されます。どちらもデフォルトで「(Select a ______)」になるはずです。これは、「値」が 0 の各選択の最初のオプションとしてリストされています。適切な ng-model 変数は 0 に初期化されます。

選択リストの実際の HTML コードは、文字列連結を使用してサーバー側で生成され、$http を介してクライアントに渡され、$compile を呼び出すディレクティブを使用して挿入されます (まったく理想的ではありませんが、私のクライアントは私をかなり連鎖させています)。この API に)。1.4 アップデートの前は、すべてがうまく機能していました。

現在、私のプロジェクト選択リストはデフォルトで何も設定されていません。要素を調べると、これが表示されます...

...その最初の "? number:0 ?" で エントリは現在選択されているものです。私のサブプロジェクトの選択リストはまだうまく初期化されているため、これはさらに奇妙になります。

AngularJS 1.4 への更新で $compile にいくつかの更新があったことは知っていますが、問題の解決策がわかりません。どんな援助でも大歓迎です。

Angular カスタム ディレクティブを動的に追加したいのですが、$compile(directive) から生成されたディレクティブには双方向バインディングがありません。

これが私の単純化された問題です。私はMapBoxを使用しています。マーカーのポップアップにディレクティブを使用して、たとえばマーカーのタイトルを表示したいと考えています。MapBox は HTML を文字列としてポップアップ内に配置する必要があるため、私のアイデアは、 $compiled ディレクティブを渡すことでした$compile('<myDirective></myDirective>')($scope).html()。

ディレクティブをそのテンプレートに置き換えますが、{{values}} は解決されません。

ポップアップを作成するためにこのようなものがあります

ctrl.createPopup(marker)コントローラーの関数を呼び出します。これは次のことを行います。

wheremapbox-marker-popupは、次のように指定されたディレクティブです。

とにかく... mapboxMarkerPopupが機能していません。タイトルは次のように表示されます{{title}}

[UPDATE2 - {{title}} 未解決]

これがJSFiddleです

KendoUI kendo-tooltip のラッパーであるディレクティブがあり、次のようにインスタンス化しています。

コード内で、次のように my-directive-popover を kendo-tooltip に置き換えます。

もちろん、プリコンパイル関数の最後で、別の剣道ディレクティブとして認識されるようにこれをコンパイルする必要があります。

Kendo 2014.2.903 では正常に動作していましたが、最新の Kendo 2015.1.429 では次のエラーが発生します。