'this' vs $ scope dans les contrôleurs AngularJS

Dans la section "Créer des composants" de la page d'accueil d'AngularJS , il y a cet exemple:

controller: function($scope, $element) {
  var panes = $scope.panes = [];
  $scope.select = function(pane) {
    angular.forEach(panes, function(pane) {
      pane.selected = false;
    });
    pane.selected = true;
  }
  this.addPane = function(pane) {
    if (panes.length == 0) $scope.select(pane);
    panes.push(pane);
  }
}

Remarquez comment la selectméthode est ajoutée $scope, mais la addPaneméthode est ajoutée à this. Si je le change en $scope.addPane, le code se casse.

La documentation indique qu'il y a en fait une différence, mais elle ne mentionne pas la différence:

Les versions précédentes d'Angular (pré 1.0 RC) vous permettaient d'utiliser de thismanière interchangeable avec la $scopeméthode, mais ce n'est plus le cas. À l'intérieur des méthodes définies sur la portée thiset $scopesont interchangeables (ensembles angulaires thisà $scope), mais pas autrement à l'intérieur du constructeur de votre contrôleur.

Comment fonctionne thiset $scopefonctionne dans les contrôleurs AngularJS?

"Comment fonctionne thiset $scopefonctionne dans les contrôleurs AngularJS?"

Réponse courte :

• this
  • Lorsque la fonction constructeur du contrôleur est appelée, thisest le contrôleur.
  • Lorsqu'une fonction définie sur un $scopeobjet est appelée, thisest la "portée en vigueur au moment de l'appel de la fonction". Il peut s'agir (ou non!) De la $scopedéfinition de la fonction. Donc, à l'intérieur de la fonction, thiset $scopepeut ne pas être le même.
• $scope
  • Chaque contrôleur a un $scopeobjet associé .
  • Une fonction de contrôleur (constructeur) est chargée de définir les propriétés et les fonctions / le comportement du modèle sur son associé $scope.
  • Seules les méthodes définies sur cet $scopeobjet (et les objets de portée parent, si l'héritage prototypique est en jeu) sont accessibles à partir du HTML / de la vue. Par exemple, à partir de ng-click, filtres, etc.

Réponse longue :

Une fonction de contrôleur est une fonction constructeur JavaScript. Lorsque la fonction constructeur s'exécute (par exemple, lorsqu'une vue se charge), this(c'est-à-dire que le "contexte de fonction") est défini sur l'objet contrôleur. Donc, dans la fonction constructeur du contrôleur "tabs", lorsque la fonction addPane est créée

this.addPane = function(pane) { ... }

il est créé sur l'objet contrôleur, pas sur $ scope. Les vues ne peuvent pas voir la fonction addPane - elles n'ont accès qu'aux fonctions définies sur $ scope. En d'autres termes, dans le HTML, cela ne fonctionnera pas:

<a ng-click="addPane(newPane)">won't work</a>

Après l'exécution de la fonction de constructeur de contrôleur "tabs", nous avons ce qui suit:

La ligne noire en pointillés indique l'héritage prototypique - un oscilloscope isolé hérite de Scope de manière prototypique . (Il n'hérite pas de manière prototypique de la portée en vigueur où la directive a été rencontrée dans le HTML.)

Maintenant, la fonction de lien de la directive volet veut communiquer avec la directive tabs (ce qui signifie vraiment qu'elle doit affecter les onglets isoler $ scope d'une certaine manière). Les événements peuvent être utilisés, mais un autre mécanisme consiste à avoir la directive de volet requirele contrôleur des onglets. (Il ne semble pas y avoir de mécanisme pour la directive de volet dans requireles onglets $ scope.)

Donc, cela pose la question: si nous n'avons accès qu'au contrôleur d'onglets, comment pouvons-nous accéder aux onglets isoler $ scope (ce que nous voulons vraiment)?

Eh bien, la ligne pointillée rouge est la réponse. La "portée" de la fonction addPane () (je fais référence ici à la portée / fermetures de la fonction JavaScript) donne à la fonction l'accès aux onglets isolant $ scope. C'est-à-dire, addPane () a accès aux "onglets IsolateScope" dans le diagramme ci-dessus en raison d'une fermeture qui a été créée lorsque addPane () a été défini. (Si nous définissions plutôt addPane () sur l'objet tabs $ scope, la directive pane n'aurait pas accès à cette fonction, et par conséquent, elle n'aurait aucun moyen de communiquer avec les tabs $ scope.)

Pour répondre à l'autre partie de votre question how does $scope work in controllers?:

Dans les fonctions définies sur $ scope, thisest défini sur "le $ scope en vigueur où / quand la fonction a été appelée". Supposons que nous ayons le code HTML suivant:

<div ng-controller="ParentCtrl">
   <a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
   <div ng-controller="ChildCtrl">
      <a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
   </div>
</div>

Et le ParentCtrl(uniquement) a

$scope.logThisAndScope = function() {
    console.log(this, $scope)
}

Cliquer sur le premier lien montrera que thiset $scopesont les mêmes, puisque " la portée en vigueur lorsque la fonction a été appelée " est la portée associée à la ParentCtrl.

Cliquer sur le deuxième lien révélera thiset ne$scope sera pas le même, car " la portée en vigueur lorsque la fonction a été appelée " est la portée associée à la ChildCtrl. Donc , ici, thisest réglé sur ChildCtrl« s $scope. À l'intérieur de la méthode, se $scopetrouve toujours la ParentCtrlportée de $.

Violon

J'essaie de ne pas utiliser à l' thisintérieur d'une fonction définie sur $ scope, car cela devient déroutant quelle $ scope est affectée, d'autant plus que ng-repeat, ng-include, ng-switch et les directives peuvent tous créer leurs propres étendues enfants.

La raison pour laquelle «addPane» est attribué à cela est à cause de la <pane>directive.

La panedirective fait require: '^tabs', qui place l'objet contrôleur tabs d'une directive parent, dans la fonction de lien.

addPane est affecté à this afin que la panefonction de liaison puisse le voir. Ensuite, dans la panefonction de lien, addPanen'est qu'une propriété du tabscontrôleur, et ce n'est que tabsControllerObject.addPane. Ainsi, la fonction de liaison de la directive pane peut accéder à l'objet contrôleur tabs et donc accéder à la méthode addPane.

J'espère que mon explication est assez claire .. c'est un peu difficile à expliquer.

Je viens de lire une explication assez intéressante sur la différence entre les deux, et une préférence croissante pour attacher des modèles au contrôleur et alias le contrôleur pour lier les modèles à la vue. http://toddmotto.com/digging-into-angulars-controller-as-syntax/ est l'article.
Il ne le mentionne pas mais lors de la définition des directives, si vous avez besoin de partager quelque chose entre plusieurs directives et que vous ne voulez pas de service (il y a des cas légitimes où les services sont un problème), attachez les données au contrôleur de la directive parent.

Le $scopeservice fournit de nombreuses choses utiles, $watchétant les plus évidentes, mais si tout ce dont vous avez besoin pour lier des données à la vue, utiliser le contrôleur ordinaire et le `` contrôleur comme '' dans le modèle est correct et sans doute préférable.

Je vous recommande de lire le post suivant: AngularJS: "Controller as" ou "$ scope"?

Il décrit très bien les avantages d'utiliser "Controller as" pour exposer des variables sur "$ scope".

Je sais que vous avez posé des questions précises sur les méthodes et non sur les variables, mais je pense qu'il vaut mieux s'en tenir à une technique et y être cohérent.

Donc, à mon avis, en raison du problème des variables discuté dans le post, il est préférable d'utiliser simplement la technique "Controller as" et de l'appliquer également aux méthodes.

Dans ce cours ( https://www.codeschool.com/courses/shaping-up-with-angular-js ), ils expliquent comment utiliser "ceci" et bien d'autres choses.

Si vous ajoutez une méthode au contrôleur via «cette» méthode, vous devez l'appeler dans la vue avec le nom du contrôleur «dot» votre propriété ou méthode.

Par exemple, en utilisant votre contrôleur dans la vue, vous pouvez avoir un code comme celui-ci:

    <div data-ng-controller="YourController as aliasOfYourController">

       Your first pane is {{aliasOfYourController.panes[0]}}

    </div>

Les versions précédentes d'Angular (pré 1.0 RC) vous permettaient de l'utiliser de manière interchangeable avec la méthode $ scope, mais ce n'est plus le cas. À l'intérieur des méthodes définies sur l'étendue this et $ scope sont interchangeables (angular définit ceci sur $ scope), mais pas autrement à l'intérieur du constructeur de votre contrôleur.

Pour ramener ce comportement (quelqu'un sait-il pourquoi il a été changé?), Vous pouvez ajouter:

return angular.extend($scope, this);

à la fin de votre fonction de contrôleur (à condition que $ scope ait été injecté dans cette fonction de contrôleur).

Cela a un bel effet d'avoir accès à la portée parent via un objet contrôleur que vous pouvez obtenir avec l'enfant require: '^myParentDirective'

$ scope a un `` ceci '' différent du contrôleur `` ceci '' .Ainsi, si vous mettez un console.log (ceci) dans le contrôleur, il vous donne un objet (contrôleur) et this.addPane () ajoute la méthode addPane à l'objet contrôleur. Mais la portée $ a une portée différente et toutes les méthodes de sa portée doivent être accédées par $ scope.methodName (). this.methodName()à l'intérieur du contrôleur signifie ajouter des méthos à l'intérieur de l'objet contrôleur. $scope.functionName()est en HTML et à l'intérieur

$scope.functionName(){
    this.name="Name";
    //or
    $scope.myname="myname"//are same}

Collez ce code dans votre éditeur et ouvrez la console pour voir ...

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this $sope vs controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script>
        var app=angular.module("myApp",[]);
app.controller("ctrlExample",function($scope){
          console.log("ctrl 'this'",this);
          //this(object) of controller different then $scope
          $scope.firstName="Andy";
          $scope.lastName="Bot";
          this.nickName="ABot";
          this.controllerMethod=function(){

            console.log("controllerMethod ",this);
          }
          $scope.show=function(){
              console.log("$scope 'this",this);
              //this of $scope
              $scope.message="Welcome User";
          }

        });
</script>
</head>
<body ng-app="myApp" >
<div ng-controller="ctrlExample">
       Comming From $SCOPE :{{firstName}}
       <br><br>
       Comming from $SCOPE:{{lastName}}
       <br><br>
       Should Come From Controller:{{nickName}}
       <p>
            Blank nickName is because nickName is attached to 
           'this' of controller.
       </p>

       <br><br>
       <button ng-click="controllerMethod()">Controller Method</button>

       <br><br>
       <button ng-click="show()">Show</button>
       <p>{{message}}</p>

   </div>

</body>
</html>