問題タブ [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.
javascript - AngularJS : transclude を使用してディレクティブに関連付けられた要素を変更します
への呼び出しに関連付けられた要素を変更するにはどうすればよいtransclude()ですか?
私のアプリでは、サーバーから SVG ファイル全体を動的にロードして表示します。読み込まれたコンテンツに動作を追加する必要があります。
現在、私は次のようなものを持っています：
これにより、div 内に SVG タグが読み込まれます。<path>これはうまく機能しますが、 、 などに ng-click を追加したい場合はどうすればよい<circle>ですか? ng-click箱から出してすぐに svg パスで既に動作します。それは、何らかの方法で要素を参照するだけの問題です。
Transclude を使用して、パスごとに 1 回実行されるディレクティブを既に作成できます。
しかし、svg-each-path 内では、要素ごとに個別のスコープを持っていelますが、ディレクティブへのパラメーターは無意味です。または、まだ親divなどを指しています。
私はこれをしたいと思います：
svg-each-path現在の様子は次のとおりです。
angularjs - テーブルの angular ディレクティブ: トランスクルードされた要素を ng-bind-html でバインドします
次のような一般的なテーブル ディレクティブを記述しようとしています。
これにより、次の html が生成されます。
私のh-tableテンプレートは次のようなものです：
したがって、h-table と h-column という 2 つのディレクティブを作成する必要があります。h-table ディレクティブは、両方のディレクティブで使用されるディレクティブ コントローラーを使用します。h-column ディレクティブは、このコントローラーを使用して列をテーブルに追加し、行/列の値を取得します。
これまでのところ、これは私のディレクティブのコントローラーです:
私の h-column ディレクティブは、h-table のコントローラーを受け取ります。transclude を使用してコンテンツを取得し、このコンテンツを col オブジェクト内に保存してからバインドします。
そして最後に:)私のh-tableディレクティブ：
h-column のコンテンツを td タグ内に配置する必要があります。したがって、getContentOrValueFor 関数を呼び出して、h-column のディレクティブ内にあるこのコンテンツを取得します。
コンテンツがない場合は、フィールドの値でバインドします。
h 列の内容が {{1+2+3}} のようなものであれば、正常に動作します (6 と表示されますが、問題ありません)。
ただし、このコンテンツが次のような html タグの場合:
「html.indexOf は関数ではありません」というエラーが表示されます
どうすればこれを達成できますか??
javascript - AngularJS:属性ディレクティブを保持し、新しいものを追加できるトランスクルージョン要素ディレクティブを作成する方法は?
私はこの問題に2日間取り組んできました。もっとシンプルにすべきだと感じています。
問題の説明
次のように使用されるディレクティブを作成したいと思います。
そして出力として持っています：
当然のことながら、いくつかの作業を行うリンク関数とコントローラーがありますが、主な懸念事項は次のとおりです。
- DOM 要素は元の名前を保持するため、直感的な CSS スタイルを適用できます。
- すでに存在する属性ディレクティブが適切に機能し続けること、および
- 新しい属性ディレクティブは、要素ディレクティブ自体によって追加できます。
例
たとえば、クリックされたときに内部で何かを行う要素を作成したいとします。
これは、次のようなものにコンパイルできます。
whereは、ディレクティブinternalFnの内部スコープで定義されます。clickCount
試み
私の試みの 1 つは、このプランカーです: http://plnkr.co/edit/j9sUUS?p=preview
Plunker がダウンしているように見えるので、コードは次のとおりです。
これは、ディレクティブを使用した HTML です。
また、要素はその名前を保持するため、css は次のように使用できます。
何が問題なのかについていくつかのアイデアがありますが、いくつかの代替アプローチを試しました。リンカーをいじった場合、おそらくもう一度試してみると$compile、コントローラー関数も2回呼び出す必要があります。とにかく、それを適切に行う方法の例をいただければ幸いです。
angularjs - AngularJS : あるディレクティブからトランスクルードされたディレクティブに属性値を渡す
いくつかの機能を備えたコンテナー ディレクティブを作成しなければならない状況があります。そして、そのコンテナー ディレクティブにラップできるディレクティブのリストがあります。
このようなもの：
それらがトランスクルージョンされているディレクティブのand/or属性値を作成<some-directive>し<some-other-directive>て認識できる方法はありますか?foobar
基本的な theContainer ディレクティブ
これらの 2 つのディレクティブには、まったく無関係の異なる機能があると仮定しましょう。
someDirective
someOther指令
angularjs - トランスクルードされたスコープの ng-if がスコープの継承を壊す
そのフィドルは問題を示していますhttp://jsfiddle.net/LAqeX/2/
ページの一部をラップして非表示にするディレクティブを作成したいと考えています。そして、不要なバインディングを削除するために ng-if を使用したいと思います。しかし、いくつかの黒魔術が発生します。
これは私の好ましいディレクティブ コードです。
2 つのスコープを作成することになっています。
- title と visible の 2 つの変数を持つディレクティブ アイソレート スコープ
- 「通常の」スコープ ツリーからプロトタイプとして継承されるトランスクルード スコープ。
ただし、ng-if はトランスクルード スコープを現実から多少切り離し、トランスクルード スコープはコントローラから継承しません。フィドルを参照してください。問題が非常に明確に示されています。
そこで何が起こっているのか、それを解決する方法はありますか?
アップデート
スコープチェーンが壊れているように見える理由を見つけたようです。ng-if によって作成されたスコープは withIf ディレクティブの isolate ブランチに属します。そのため、コントローラーのスコープが存在することさえわかりません。しかし、問題は同じままです-そのような場合に ng-if を使用する方法。
javascript - AngularJS: ディレクティブの ng-controller は、ディレクティブ内のトランスクルードされた要素では機能しません
これが私のスクリプトです：
そしてhtml：
問題は、ディレクティブにSalutationController適用されると、トランスクルードされた要素には表示されないことです。しかし、要素を配置または配置すると、機能します。ドキュメントが言うように、新しいスコープを作成します。my-salutation$scope.target ng-controller<body><strong>ng-controller
この場合、そのスコープとディレクティブのスコープがどのように互いに干渉しているのか、誰が説明できますか?
コントローラーをディレクティブに配置するにはどうすればよいですか? ヒントをいただければ幸いです。
string - YAML は別のファイル内の別の変数を参照します
2 つの YAML ファイルがあるとします。
1) アプリケーション.yml
2) ユーザー.yml
最初は、参照を使用するかもしれないと思いました：
1) アプリケーション.yml
2) ユーザー.yml
しかし、1 つのファイルで宣言されたアイテムに対してのみ可能であることが判明しました。application.yml で定義された変数から値を取得する方法はありますか?