[解決済み] AngularJs "controller as "構文 - 明確化？

2022-08-13 21:55:26

質問

I 新しい構文について読むに関して、angularJS から controller as xxx

構文 InvoiceController as invoice は、Angularにコントローラのインスタンスを作成するよう指示します。コントローラをインスタンス化し、現在のスコープの変数 invoice に保存します。スコープに保存します。

可視化:

では、パラメータ $scope がなくなり、コントローラ内のコードがよりすっきりします。

しかし

別のエイリアスを指定する必要があります をビューで指定する必要があります。

ということで、今までは:

<input type="number" ng-model="qty"  />

....controller('InvoiceController', function($scope) {
   // do something with $scope.qty <--notice

そして今、私ができることは:

 <input type="number" ng-model="invoic.qty"  /> <-- notice 

  ....controller('InvoiceController', function() {
       // do something with  this.qty  <--notice

質問

ある場所から削除して別の場所に追加することは、何を目的としていますか？

何が足りないのか、教えてください。

どのように解決するのですか？

いくつかありますね。

を好まない人もいます。 $scope 構文が好きではない人がいます (理由は聞かないでください)。彼らは、単に this . それが一つの目標でした。

プロパティがどこから来たのかを明確にすることも、本当に有用です。

コントローラをネストすることができ、htmlを読むと、すべてのプロパティがどこから来るのかが非常に明確になっています。

また を避けることができます。 の一部を ドットルール の問題があります。

例えば、2つのコントローラがあり、両方とも同じ名前 'name' である場合、次のようにすることができます。

<body ng-controller="ParentCtrl">
    <input ng-model="name" /> {{name}}

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

親と子の両方を変更することは可能で、それについては問題ありません。しかし $parent を使用する必要があります。これは、子コントローラで親の名前をシャドウしているからです。大量のhtmlコードで $parent は問題になるかもしれません。その名前がどこから来たのかわからないからです。

とは controller as を使えば、できる。

<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>

同じ例ですが、読むとずっとわかりやすいですね。

$scope プランカー
controller as プランカー

関連

最新

おすすめ