Dois-je utiliser `this` ou` $ scope`?

Les deux ont leurs utilisations. Tout d’abord, un peu d’histoire …

$ scope est la technique “classique” alors que “controller as” est beaucoup plus récente (à partir de la version 1.2.0 officiellement, bien qu’elle apparaisse dans des pré-versions instables auparavant).

Les deux fonctionnent parfaitement bien et la seule mauvaise réponse est de les mélanger dans la même application sans raison explicite. Franchement, les mélanger fonctionnera, mais cela ne fera qu’append à la confusion. Alors, choisissez-en un et roulez avec. La chose la plus importante est d’être cohérent.

Laquelle? Cela dépend de vous. Il y a beaucoup plus d’exemples de $ scope, mais “controller as” prend également de l’ampleur. Est-ce que l’un est meilleur que l’autre? C’est discutable. Alors, comment choisissez-vous?

Confort

Je préfère le “contrôleur comme” parce que j’aime cacher le $ scope et exposer les membres du contrôleur à la vue via un object intermédiaire. En définissant ceci. *, Je peux exposer exactement ce que je veux exposer du contrôleur à la vue. Vous pouvez le faire avec $ scope aussi, je préfère juste utiliser JavaScript standard pour cela. En fait, je code comme ceci:

 var vm = this; vm.title = 'some title'; vm.saveData = function(){ ... } ; return vm; 

Cela me semble plus propre et permet de voir facilement ce qui est exposé à la vue. Notez que je nomme la variable que je retourne “vm”, qui signifie viewmodel. C’est juste ma convention.

Avec $ scope, je peux faire les mêmes choses, donc je n’ajoute pas ou ne nuit pas à la technique.

 $scope.title = 'some title'; $scope.saveData = function() { ... }; 

Alors c’est à vous de jouer.

Injection

Avec $ scope, je dois injecter $ scope dans le contrôleur. Je n’ai pas à faire cela avec le contrôleur, sauf si j’en ai besoin pour une autre raison (comme $ broadcast ou montres, bien que j’essaie d’éviter les montres dans le contrôleur).

MISE À JOUR J’ai écrit ce post sur les 2 choix: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

$scope est supprimé dans Angular 2.0. Ainsi, utiliser this approche serait une approche que les autres voudraient suivre, à mesure que la date de publication d’Angular 2.0 se rapprochera.

Mon opinion est que “ceci” dans le javascript a assez de problèmes sur lui-même, et que l’ajout d’une autre signification / utilisation pour cela n’est pas une bonne idée.

J’utiliserais $ scope, pour plus de clarté.

METTRE À JOUR

Il y a maintenant la syntaxe ‘controller as’, discutée ici . Je ne suis pas un fan, mais maintenant que c’est un concept AngularJS plus «officiel», il mérite une certaine attention.

Je pense que Controller As est meilleur car il permet de manipuler plus facilement des scopes comme décrit par Todd Motto ici:

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

De plus, cela assurera que vous en avez toujours au moins un. dans votre expression de liaison qui vous oblige à suivre la recommandation Ne pas lier aux primitives .

De plus, vous pouvez découpler le périmètre qui disparaît dans la version 2.0.

Utiliser “this” semble être nouveau à partir de Google I / O 2013

http://m.youtube.com/watch?v=HCR7i5F5L8c

Vérifiez également cette réponse: “this” vs $ scope dans les contrôleurs AngularJS

La documentation Angular vous indique explicitement que l’utilisation de this est recommandée. Cela, en plus du fait que $scope soit supprimé, est une raison suffisante pour que je n’utilise jamais $scope .

jason328 “$ scope est en cours de suppression dans Angular 2.0” me semble une bonne raison. Et j’ai trouvé une autre raison pour m’aider à faire le choix: c’est plus lisible – quand je vois fooCtrl.bar en HTML, je sais immédiatement où trouver la définition de la bar .

Mises à jour: peu de temps après avoir basculé vers this solution, j’ai commencé à manquer le chemin de $scope qui nécessite moins de saisie

Les deux fonctionnent, mais si vous appliquez des éléments appropriés pour la scope à $ scope et si vous appliquez des éléments appropriés pour le contrôleur au contrôleur, votre code sera facile à gérer. Pour ceux qui disent: “Utilisez juste la scope, oubliez ce contrôleur comme syntaxe” … Cela peut fonctionner de la même façon mais je me demande comment vous pourrez maintenir une application énorme sans perdre de vue les choses.

Je préfère une combinaison.

Une simple console.log de $ scope et «this» après les avoir remplies avec des données simulées vous le montreront.

$ scope permet d’accéder aux sous-couvertures d’un contrôleur, par exemple:

 $$ChildScope: null; $$childHead: null; $$childTail: null; $$listenerCount: Object; $$listeners: Object; $$nextSibling: Scope; $$prevSibling: null; $$watchers: null; $$watcherCount: 0; $id: 2; $parent: Object; foo: 'bar'; 

** Les propriétés et les méthodes avec $$ ne sont pas recommandées avec l’équipe Angular, mais $ peut être un jeu sûr pour faire des choses intéressantes avec $ parent et $ id.

“ceci” va droit au but, en attachant des données et des fonctions à double sens. Vous ne verrez que ce que vous avez attaché:

 foo: 'bar'; 

Alors, pourquoi je préfère une combinaison?

Dans les applications nestedes de l’u-router, je peux accéder au contrôleur principal, définir et appeler des valeurs et des fonctions universelles dans un contrôleur enfant:

Dans le contrôleur principal:

 // Main Controller var mainCtrl = this; mainCtrl.foo = 'Parent at the bar'; 

Dans le contrôleur enfant:

 // Child Controller var mainCtrl = $scope.$parent.mainCtrl; var childCtrl = this; // update the parent from within the child childCtrl.underageDrinking = function(){ mainCtrl.foo = 'Child at the bar'; } // And then attach the child back to a property on the parent controller! mainCtrl.currentCtrl = childCtrl; 

Maintenant, vous pouvez accéder au parent de l’enfant et de l’enfant du parent!