問題タブ [transclusion]

Bootstrap に適合する div のグリッドを作成する基本的なディレクティブに取り組んでいます。アイテムのコレクションを指定し、必要に応じて含めることができる列の数を指定します。これはトランスクルージョンされているため、各アイテムに表示されるテンプレートを定義できます。

コレクションを行に分割し、最初のリピーターが各行を作成し、2 番目のリピーターが各列を作成するネストされたリピーターを用意します (その後、そのアイテムのコンテンツをトランスクルードします)。この単純なシナリオではうまく機能します。

問題はトランスクルージョンされたコンテンツにあります。関数を呼び出したり、親スコープからアイテムにアクセスしたりする必要がある場合があります。たとえば、表示名の書式を設定したり、クリック ハンドラーを追加したりしたいとします。

$parentこれにより複数のトランスクルージョンされたスコープが作成されるため、最終的にスコープが見つかるまで、連鎖によってスコープをネスト解除する必要があります。

これも機能しますが、厄介であり、デメテルの法則に違反しています。これは重要です。将来、これが内部でどのように機能するかを変更すると、トランスクルージョンされたコンテンツが壊れる可能性があるためです。この問題を回避するには、どうすればこれを改善できますか?

完全に機能する plunk。

ディレクティブが適用される要素 (およびその子) をラップするディレクティブを作成するのに少し問題があります。AngularJS では他の多くのありふれたことがどれほど簡単であるかを考えると、この一見ありふれたシナリオがなぜそれほど難しいのかわかりません。

私がやりたいことは、select 要素を div でラップすることです。元の選択要素とそのコンテンツを保持するためにトランスクルードを使用していますが、正しく機能させることができません。

HTML は次のようになります。

私のディレクティブは次のようになります。

結果の HTML は次のようになります。

もちろん、これは私が望むものではありません。ng-transclude 属性で指定した要素ではなく、select 要素のプロパティがラッピング div に追加されるのはなぜですか? select 要素は、ng-options および ng-model プロパティを保持する必要があります。

これを達成するために何をする必要がありますか?

多数の div をラップできる "tessellate" ディレクティブを作成しました。

一度に 1 つの div を取り、それを指定された数の列の中で最も短い列に追加して、テッセレーション/モザイク効果を作成します。

ここで plunkr を参照してください: http://plnkr.co/edit/ur0bVCFRSz1UbRHeLjz8?p=preview

問題は、モデルが変更されると、ng-repeat が、モデル内の順序ではなく、DOM に表示されるdiv の順序を使用して要素を再描画することです。最初はアイテムが正しくソートされていることがわかります。クリックAddすると、最初の列のアイテムが水平方向にソートされ、次に次の列のアイテムがソートされます。

ng-repeat が DOM 順序を使用して要素を再描画しないようにするにはどうすればよいですか? すでに追加しようとしましorderBy item.idたが、役に立ちませんでした。

私は非常に簡単なセットアップをしています：

と

プランカーはこちら: http://plnkr.co/edit/yRHcNGjQAq1NHDTuwXku

トランスクルージョン自体は機能していますが{{title}}、ディレクティブのテンプレートでのみ置き換えられます。ただし、ディレクティブのスコープに変数が含まれていても、トランスクルージョンされた要素
の{{title}}内部は空のままです。title何故ですか？

select 要素の新しいディレクティブを作成しています。ベスト プラクティスとして、サーバーからいくつかのオプションを受信し、クライアント コードで作成したい 1 つのオプション ("すべての車を検索" など) を受け取りたいと考えています。

これは私がどのように見せたいかの例です:

「すべての車を検索」の値が空であることが重要です。

しかし、選択に空の要素を追加したにもかかわらず (ref other SO posts )、不要なオプションが表示されます:

これは、transcludeと replace で Angular ディレクティブを使用した問題/バグのプランカーの例です。

誰でもこれを解決する方法について提案を受けましたか?

また、ここでAngularチームに問題を追加しました.

編集：

これをディレクティブとして使用したい理由は、アプリケーションで実装されている場所に応じて、「すべての車を検索」オプションを使用するかどうかを決定したいからです。

EDIT2: Angular チームは、これがバグであることを確認しています。「根本的な理由は、初期セットアップ後に不明なオプションが追加された場合、生成された不明なオプションが置き換えられないことです」 - lgalfaso .

$scope オブジェクトを介して、ディレクティブからネストされたディレクティブにイベントを送信しようとすると、問題が発生します。たとえば$scope.broadcast('event')、子ディレクティブはイベントを受け取りませんが、$rootScope オブジェクトを使用すると動作します$rootScope.broadcast('event')。

TL;DR : これが機能しない理由: http://plnkr.co/edit/27qYiHOilpVABSwMI0Fb?p=previewこれが機能する場合: http://plnkr.co/edit/o91yFKnQzHp7edUTTkJE?p=preview

編集: angular.js バージョン 1.3.0 以降では、これはもはや問題ではありません!!!

Angular.js ディレクティブ内にラップされた再利用可能なグラフィカル要素を構成することにより、複合 SVG を構築することに興味があります。たとえば、私は持っているかもしれません：

ここで、次のディレクティブを定義しています。

問題は、SVG 要素が正しくトランスクルージョンされていないように見えることです。別の StackOverflow の質問で、これは主に Angular.js 内で SVG ノードが適切に作成されていないことが原因であるという手がかりがここにあるようです。

さらに調べてみたところ、ヘルパー関数を使用して関連する DOM 要素を適切に作成された SVG ノードに置き換える、次のような解決策を見つけました。

しかし、これをあらゆる場所で使用する必要があるのは望ましくないように思われたので、バグが修正されるまで、回避策をできるだけバグに限定したいと考えました。

私の質問は、次のことが合理的な回避策になるかどうかです。

そして、これはPlunkerで機能します!

この方法で既存の SVG 要素ディレクティブを再定義することは有効ですか?

ポリマーにangularjsディレクティブのtransclude属性のようなものはありますか? テンプレートの特定の場所にいくつかの要素を含めることができるのは何ですか?

次のようなことを達成したいと思います。

これは次のように表現できます。

これがポリマーのタスクなのか、それともポリマーを使用する典型的な方法なのかはわかりません。私はポリマーが好きになり始めたので、私は慣用的な考え方を続けたいと思っています.