問題タブ [transclusion]
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.
angularjs - ng-repeat を含む任意のコンテンツをラップおよび変更する angularjs ディレクティブ
次のディレクティブを作成しようとしています。
- 任意のコンテンツをラップします
- そのコンテンツで見つかったすべての「h4」要素にアンカータグを追加します
これが私がこれまでに持っているもののプランカーです。
ラップされたコンテンツが静的である場合は正常に動作するように見えますが:
ラップされたコンテンツ全体が 2 回繰り返されます
私のtranscludeFnの呼び出しは、ng-trascludeが行っている作業を効果的に繰り返していますか? ng-transclude を独自の impl に置き換える必要がありますか?
ネストされた ng-repeat によって生成された「h4」タグがディレクティブによって検出されない
transcludeFn で cloneLinkFn に渡された「clone」は、ng-repeat 実行前のようです。$compile(clone)(scope) は ng-repeat 後のバージョンを生成すると考えていましたが、それも機能しなかったようです。
私が間違っていることのヒントや説明をいただければ幸いです。
ありがとう、ニキータ
angularjs - AngularJS:カスタムディレクティブで子要素を適切にトランスクルードする方法は?
ここにいくつかのコードがあります:リンク
子をボイラープレートでラップするディレクティブを作成しようとしています。しかし、子供たちがng-if外見をコントロールしている場合、「トランスクルージョン」は機能しません。ある程度はそうですが、ご覧のとおり、ng-ifロジックが正しく渡されていません。
私はそれを修正する方法を知りたいのですが、Angular docs でこれが説明されている場所 (もしあれば) も知りたいです。
angularjs - angularjsでのトランスクルージョンの主な用途は何ですか
私は最近、ディレクティブでトランスクルージョンに出くわしました。この概念を持つ目的は何ですか。オブジェクトのカプセル化を知っている限り、おそらく双方向バインディングがあります。ただし、これは、ディレクティブのスコープ属性で「=」を使用することで可能になります。では、ディレクティブの重要な点は何ですか?
javascript - ネストされたディレクティブでスコープを保持するにはどうすればよいですか?
私の目標は、再利用可能で軽量な UI 要素のための柔軟な一連のディレクティブを作成することです。それぞれに独立したスコープがあり、それらの多くはコンテンツをトランスクルードします。各ディレクティブをブラック ボックスにしたい - 理想的には、トランスクルードするコンテンツを記述するときに、別のディレクティブが内部でネストされているかどうかをユーザーが知る必要はありません。
transclude オプションは、スコープがネストされる方法を変更します。これにより、トランスクルードされたディレクティブの内容が、内部にあるスコープではなく、ディレクティブの外部にあるスコープを持つようになります。そうすることで、内容がスコープ外にアクセスできるようになります。
単一のディレクティブを使用すると、これが説明どおりに機能することがわかりました。ただし、コンテンツをトランスクルードする別のディレクティブがネストされている場合、トランスクルードされたコンテンツは、外側にあるスコープではなく、外側のディレクティブのスコープ内で解決されます。これは、トランスクルージョンされたコンテンツがどの範囲で解決されるかをユーザーが知ることができないため、問題です!
例: (フィドル)
そしてHTML:
<inner></inner>要素内{{value}}では、親スコープ内で「メイン」として評価されます (予想どおり)。ただし、<outer></outer>要素の内側は、「外側」として{{value}}分離されたスコープ内で評価されます(予期されません)。outerこのように、ディレクティブのテンプレートは、トランスクルージョンされたコンテンツが解決される範囲に影響を与えることができます!
この問題を回避する方法はありますか?
javascript - AngularJS : Transcluded ディレクティブとモデルへのアクセス
smart inputテキスト入力要素をラップするディレクティブを作成しています。ディレクティブのいくつかのクラスを操作するには、入力要素のモデルにアクセスする必要があります。
入力要素は多くのタイプ (テキスト、電子メール、パスワード) のいずれかになる可能性があるため、ディレクティブをトランスクルージョンして、それぞれに異なるタイプの検証を追加できるようにする必要があります。
私が抱えている問題 (インターネット上の他の多くの問題と同様) は、スコープの継承です。
これが私の現在のコードが
HTMLのように見えるものです
JS
基本的に、value$watch 関数の内部は定義されていないため、明らかにこれを正しく行っていません。
では、ディレクティブに同じオブジェクトへの参照を持たせ、その値を取得できるようにしながら、モデルを入力フィールドにバインドするにはどうすればよいwatchでしょうか?