AngularJS で「Controller as」構文を選択する理由-jsチュートリアル-php.cn

AngularJS で「Controller as」構文を選択する理由

Susan Sarandon

リリース： 2024-10-27 15:36:29

オリジナル

244 人が閲覧しました

Why Choose

AngularJS の "controller as" 構文の明確化

AngularJS の "controller as" 構文にはいくつかの利点があり、従来の $scope アプローチのいくつかの欠点に対処します。

利点:

コードの可読性の向上: コントローラーのエイリアスを定義することで、ビュー内のプロパティと変数の起源を識別しやすくなります。
ドットルールの問題の軽減: 同じプロパティ名を持つコントローラーをネストすると、従来の $scope 構文ではドットルールの競合が発生する可能性があります。「Controller as」は、プロパティのソースを明確に示すことでこの問題を解決します。
柔軟性: 「Controller as」を使用すると、$scope の依存関係を回避し、代わりに「this」キーワードを利用できます。開発者は明確さと一貫性を好みます。

例:

次の例では、2 つのネストされたコントローラーがあり、どちらも "name" プロパティを持ちます:

従来の $scope 構文:

<code class="html"><body ng-controller="ParentCtrl">
  <input ng-model="name"> {{name}}

  <div ng-controller="ChildCtrl">
    <input ng-model="name"> {{name}} - {{$parent.name}}
  </div>
</body></code>

ログイン後にコピー

この例では、親の "name" プロパティにアクセスするには $parent を使用する必要があり、コードが煩雑になる可能性があります。

Controller As構文:

<code class="html"><body ng-controller="ParentCtrl as parent">
  <input ng-model="parent.name"> {{parent.name}}

  <div ng-controller="ChildCtrl as child">
    <input ng-model="child.name"> {{child.name}} - {{parent.name}}
  </div>
</body></code>

ログイン後にコピー

「controller as」を使用すると、子コントローラーの「name」プロパティが親コントローラーに由来することが明確になり、可読性が向上し、潜在的なドットルールの問題が回避されます。