Angular-styleguide: controllerAs構文名が競合しています

作成日 2015年11月05日  ·  9コメント  ·  ソース: johnpapa/angular-styleguide

やあ、

Angualr 1のcontrollerAs構文に関して、今日私が発見したことがあります。Angular1アプリケーションでは、ディレクティブを使用して個々のコンポーネントを定義することにより、コンポーネントアーキテクチャを適用しようとしています。 ディレクティブには、 controllerAs: 'vm'持つ独自のコントローラーがあります。 また、ビュー間を移動するためにangular-uiルーターを使用します。 私が発見したのは、 controllerAs: 'vm'定義されたルートがあり、 controllerAs: 'vm'を定義するビュー内でディレクティブを使用すると、親コントローラーのvmが上書きされることです。 ディレクティブのスコープが分離されていても、動作は同じです。 ただし、ルーターのcontrollerAsパラメーターに別の名前を指定すると、ディレクティブ(例: controllerAs: 'componentVm' )はすべて正常に機能します。

私は何か間違ったことをしているのだろうかと思っていましたか? そうでない場合、およびこれが意図された動作である場合は、Angular 1のコンポーネントアーキテクチャをディレクティブ固有のコントローラーで使用するときに、潜在的なcontrollerAs名の競合について言及する何かをスタイルガイドに追加することをお勧めします。

敬具

ジュセフ

Angular 1 help wanted question

最も参考になるコメント

明確になるまでvmを使用します。 次に、よりわかりやすい名前を使用します。
それが私の好きなものです。

全てのコメント9件

スタイルガイドはすでに言っています:

「注:より大きなコードベースで作業する場合、よりわかりやすい名前を使用すると、認知のオーバーヘッドと検索のしやすさが軽減されます。入力が面倒な過度に冗長な名前は避けてください。」

ですから、 @ johnpapaはこれをうまくカバーしていると思います。 おそらく、わずかな改善は、ネストされたコントローラーの使用が「より大きなコードベース」としてカウントされることに言及することでしょう。

(ただし、十分に分離されたコンポーネントを使用してビルドしている場合は、大規模なプロジェクトであっても、非常に明示的にネストされたコントローラーはおそらくほとんどありません。)

スタイルガイドのそのセクションは非常に新しく、おそらく少しIMOを拡張/改善することができます。
詳細については、この会話を参照してください: https

あなたがそれが助けになると思うなら、ネストするコントローラーに短いビットを追加するためにPRを自由に作ってください

私はAngularに少し慣れていないので、Angular1.4.8から1.5.0に移行します。 ディレクティブをネストするときにも同じ問題が発生しました。 'vm'が子ディレクティブによって上書きされたため、親ディレクティブはcontrollerAsプロパティになります。 子に分離スコープを追加すると問題が修正されましたが、これらが問題の原因となる可能性がある場所はわかります。

あなたがそれが助けになると思うなら、ネストするコントローラーに短いビットを追加するためにPRを自由に作ってください

Angular 1コントローラーに名前を付けた私の経験では、使用可能なオプションの中で、コンポーネント自体にちなんで名前を変更するのが最も理にかなっています。 これは、同じタイプのコンポーネントを1つのタイプ内にネストした場合にのみ発生します。これは、大規模なアプリでの経験ではあまり発生しません。

したがって、明確にするために、スタイルガイドでこのルールを変更して、コンポーネントの名前の使用を推奨することをお勧めします。

明確になるまでvmを使用します。 次に、よりわかりやすい名前を使用します。
それが私の好きなものです。

2015年11月に報告されたjusefbと同じ問題が発生しました。一部のディレクティブをcontrollerAs: 'vm'に変更しました。 あるケースでは、controllerAs: 'vm'は分離されたスコープを持っていませんでした(しかし、他のすべてのケースでは、controllerAs: 'vm'ディレクティブは分離されたスコープを持っていました)。 分離されたスコープを持たない1つのcontrollerAs: 'vm'ディレクティブにスコープ:{}を追加すると、問題が修正されました。

このページは役に立ちましたか?
0 / 5 - 0 評価