angularjs - transclude - component angular js




AngularJSに指示文を書くとき、私は新しいスコープ、新しい子スコープ、または新しいスコープが必要ないかどうかをどうやって決めますか? (4)

私は、新しいディレクティブを書くときに使用するスコープのタイプを決定するのに役立ついくつかのガイドラインを探しています。 理想的には、フローチャートのようなものがあります。私は多くの疑問を抱き、正しい答え、新しい新しいスコープ、新しい子のスコープ、新しいスコープを飛ばしてしまうのですが、それはあまりにも多くのことを求めています。 私の現在の手っ取り早いガイドラインがあります:

ある要素の分離スコープを持つディレクティブを使用すると、同じ要素の他のディレクティブすべてが同じ(1つの)分離スコープを使用することになりますので、分離スコープを使用できるときにはこれが厳しく制限されません。

Angular-UIチーム(または多くのディレクティブを書いた人)が経験を共有できることを期待しています。

単に「再利用可能なコンポーネントに隔離されたスコープを使用する」という答えを加えないでください。


私の個人的な方針と経験:

隔離された: プライベートサンドボックス

私は、私のディレクティブでのみ使用されるスコープのメソッドと変数をたくさん作成し、ユーザーが見たこともなく直接アクセスすることもしません。 どの範囲データが利用可能かをホワイトリストにしたい 私はトランジションを使用して、ユーザーが親スコープ(影響を受けない)で戻ることができるようにすることができます 。 私は、継承された子どもたちの変数とメソッドにアクセスできないようにします。

子: コンテンツのサブセクション

ユーザーがアクセスできるスコープのメソッドと変数を作成したいが、私のディレクティブのコンテキスト外のスコープ(兄弟や親)を囲むことには関係しない。 私はまた、すべての親スコープのデータを透過的に流すようにしたいと思います。

なし: 単純な読み取り専用ディレクティブ

スコープのメソッドや変数を混乱させる必要はありません。 私はおそらくスコープ(単純なjQueryプラグインの表示、検証など)と関係のないことをやっているでしょう。

ノート

  • ngModelやその他のものがあなたの決定に直接影響するようにしてはいけません。 ng-model=$parent.myVal (child)やngModel: '='ngModel: '=' )のようなことをすることで、奇妙な行動を回避することができます。
  • Isolate + transcludeは、すべての通常の動作を兄弟ディレクティブに戻し、親スコープに戻します。したがって、あなたの判断にも影響しないようにしてください。
  • DOMの下半分のスコープにデータを置くのと同じですが、0の意味を持つ上半分にはデータを入れないのと同じだから、 noneのスコープを混乱させないでください。
  • ディレクティブの優先順位に注意を払う(これがどのように物事に影響を与えるかの具体例はない)
  • サービスを注入するか、コントローラを使用してあらゆるスコープタイプのディレクティブ間で通信します。 親要素を見るには、 require: '^ngModel'require: '^ngModel'

ちょうど私の現在の理解を追加し、それが他のJSコンセプトとどのように関係しているかを追加すると考えまし

デフォルト(宣言されていないか、スコープがfalseなど)

これは哲学的にはグローバル変数を使うことと同じです。 あなたのディレクティブは、親コントローラ内のすべてにアクセスできますが、それらにも影響を与え、同時に影響を受けています。

範囲:{}

これはモジュールのようなもので、使いたいものは明示的に渡す必要があります。 あなたが使用するEVERYディレクティブが独立したスコープである場合、EVERY JSファイルを作成して、すべての依存関係を注入する際にオーバーヘッドの大きい独自のモジュールを作成することと同等になります。

スコープ:子

これは、グローバル変数と明示的パススルーの中間に位置します。 これはjavascriptのプロトタイプチェーンに似ていて、親スコープのコピーを拡張するだけです。 分離スコープを作成し、親スコープのすべての属性と関数を渡すと、機能的にはこれと同等です。

重要な点は、ANYディレクティブはどのような方法でも記述できるということです。 さまざまなスコープ宣言は、整理に役立ちます。 すべてをモジュールにすることもできますし、すべてのグローバル変数を使用して、非常に注意することもできます。 メンテナンスを容易にするために、ロジックを論理的に一貫性のある部品にモジュール化することが望ましいです。開かれた草原と閉鎖された刑務所の間にはバランスがあります。 これが難しいのは、人々がこれについて学ぶとき、ディレクティブの仕組みを学んでいると思っていますが、実際にはコード/ロジック組織について学んでいると思います。

ディレクティブがどのように機能するかを理解するもう一つのことは、ngIncludeについて学習することです。 ngIncludeはHTMLパーシャルをインクルードするのに役立ちます。 最初にディレクティブを使用し始めたとき、テンプレートを使用してコードを減らすことができましたが、実際にはロジックを付加していませんでした。

もちろん、angleの指示とangular-uiチームの作業との間には、私がまだ何もしていない独自の指示を作成していないので、これに関する私の見解は完全に間違っているかもしれません。


多くのディレクティブを書いた後、私はそれほどisolatedれていないスコープを使うことに決めました。 データがカプセル化され、親スコープにデータが漏れないようにすることは魅力的ですが、一緒に使用できるディレクティブの量は厳しく制限されています。 そう、

あなたが書こうとしているディレクティブが完全に単独で動作し、それを他のディレクティブと共有しない場合は、 独立したスコープに進んでください。 (プラグインできるコンポーネントのように、エンド・デベロッパー向けのカスタマイズはそれほどありません)(ディレクティブを含むサブ要素を記述しようとすると非常に手間がかかります)

あなたが書くつもりのディレクティブが、スコープの内部状態や明示的なスコープの変更(ほとんど非常に単純なもの)を必要としないdom操作を行うだけの場合 新しい範囲には行きません 。 ( ngShowngMouseHoverngClickngRepeat

あなたが書くつもりのディレクティブが親スコープ内のいくつかの要素を変更する必要があるだけでなく、いくつかの内部状態を処理する必要がある場合は、 新しい子スコープに進んでください。 ( ngControllerなど)

ディレクティブのソースコードを確認してhttps://github.com/angular/angular.js/tree/master/src/ng/directivehttps://github.com/angular/angular.js/tree/master/src/ng/directive : https://github.com/angular/angular.js/tree/master/src/ng/directive
彼らのことを考える方法を大いに助けます


私はウルムと同意する。 理論的には、孤立したスコープはすばらしい "ポータブルな"ものですが、私のアプリをビルドする際には、いくつかのディレクティブ(他のものの中に入れ子にしたり、属性を追加する)を組み込む必要がありました。ドメイン固有言語の目的である独自のHTML。

最後に、ディレクティブの各DOM呼び出しで複数の属性を持つチェーン全体のグローバル値または共有値を渡す必要があるのはあまりにも奇妙です(スコープを分離する必要があります)。 DOM内のすべてのものを繰り返し記述するのはちょうど馬鹿に見えますが、たとえそれらが共有オブジェクトであっても、効率が悪いと感じます。 また、指令宣言を不必要に複雑にします。 $ parentを使って "到達して"指示文のHTMLから値を取得する回避策は、Very Bad Formのようです。

私も、アプリケーションを変更して、ほとんどのアイソレートを持つ子スコープ・ディレクティブ(単純で非反復的な属性を渡すことができるもの以外に、親から何もアクセスする必要のないもののみ)を変更しました。

このようなことが起こる前に何十年もドメイン固有言語の夢を夢見てきたAngularJSは、このオプションを提供していることを歓迎しています。この分野で開発者が増えるにつれて、また、建築家が作成、展開、デバッグすることも容易です。

- D





angularjs-scope