Syntaxe "controller as" d'AngularJs - clarification ?

Question

Syntaxe "controller as" d'AngularJs - clarification ?

Demandé el 22 de Janvier, 2014: Quand la question a-t-elle été
10256 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

I lire sur la nouvelle syntaxe d'angularJS concernant controller as xxx

La syntaxe InvoiceController as invoice indique à Angular d'instancier le contrôleur et de l'enregistrer dans la variable facture dans le scope actuel. courante.

Visualisation :

enter image description here

Ok, donc je n'aurai pas le paramètre $scope dans mon contrôleur et le code sera beaucoup plus propre dans le contrôleur.

Mais

Je vais devoir spécifier un autre alias en vue

Donc, jusqu'à présent, je pouvais faire :

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

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

Et maintenant je peux faire :

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

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

Question

Quel est le but de l'opération ? Enlever d'un endroit et ajouter à un autre ?

Je serai heureux de voir ce que j'ai manqué.

Demandé el 22 de Janvier, 2014 par Royi Namir

Answer 1

3 Réponses

Answer 2

162voto

Jesus Rodriguez Points 4441

Il y a plusieurs choses.

Certaines personnes n'aiment pas le $scope (ne me demandez pas pourquoi). Ils disent qu'ils pourraient simplement utiliser this . C'était l'un des objectifs.

Il est également très utile de préciser l'origine d'un bien.

Vous pouvez imbriquer les contrôleurs et en lisant le html il est assez clair où chaque propriété vient.

Vous pouvez également éviter certains des règle des points problèmes.

Par exemple, si vous avez deux contrôleurs, tous deux portant le même nom 'nom', vous pouvez faire ceci :

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

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

Vous pouvez modifier à la fois le parent et l'enfant, aucun problème à ce sujet. Mais vous devez utiliser $parent pour voir le nom du parent, parce que vous l'avez masqué dans votre contrôleur enfant. Dans le code html massif $parent pourrait être problématique, vous ne savez pas d'où vient ce nom.

Avec controller as vous pouvez faire :

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

Même exemple, mais il est beaucoup plus clair à lire.

Répondu el 22 de Janvier, 2014 par Jesus Rodriguez (4441 Points )

Answer 3

16voto

rawry Points 481

Le principal avantage de controller as La syntaxe que je vois est que l'on peut travailler avec les contrôleurs comme des classes, et pas seulement comme des fonctions de décoration de $scope, et profiter de l'héritage. Je me retrouve souvent dans une situation où une fonctionnalité est très similaire à un certain nombre de contrôleurs, et la chose la plus évidente à faire est de créer une classe BaseController et en hériter.

Même s'il existe l'héritage $scope, qui résout partiellement ce problème, certaines personnes préfèrent écrire du code d'une manière plus OOP, ce qui, à mon avis, rend le code plus facile à raisonner et à tester.

Voici un violon pour démontrer : http://jsfiddle.net/HB7LU/5796/

Répondu el 27 de Août, 2014 par rawry (481 Points )

Answer 4

12voto

David M. Karr Points 2210

Je crois qu'un avantage particulier est clair lorsque vous avez des scopes imbriqués. Il sera désormais parfaitement clair de quelle portée provient une référence de propriété.

Répondu el 22 de Janvier, 2014 par David M. Karr (2210 Points )

Syntaxe "controller as" d'AngularJs - clarification ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Syntaxe "controller as" d'AngularJs - clarification ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: