1056 Stimmen

'this' vs $scope in AngularJS-Controllern

Im Abschnitt "Komponenten erstellen" auf der Homepage von AngularJS gibt es dieses Beispiel:

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);
  }
}

Beachten Sie, wie die Methode select zu $scope hinzugefügt wird, aber die Methode addPane zu this. Wenn ich es zu $scope.addPane ändere, bricht der Code ab.

Die Dokumentation besagt, dass es tatsächlich einen Unterschied gibt, aber sie erwähnt nicht, was der Unterschied ist:

Frühere Versionen von Angular (vor 1.0 RC) erlaubten es Ihnen, this austauschbar mit der $scope-Methode zu verwenden, aber das ist nicht mehr der Fall. Innerhalb von Methoden, die auf dem Scope definiert sind, sind this und $scope austauschbar (Angular setzt this auf $scope), aber nicht anderswo innerhalb Ihres Controller-Konstruktors.

Wie funktionieren this und $scope in AngularJS-Controllern?

1 Stimmen

Ich finde das auch verwirrend. Wenn eine Ansicht einen Controller spezifiziert (z.B., ng-controller='...'), scheint der damit verbundene $scope ebenfalls mitzukommen, da die Ansicht auf $scope-Eigenschaften zugreifen kann. Aber wenn eine Direktive einen anderen Controller 'require't (und ihn dann in ihrer Linking-Funktion verwendet), kommt der damit verbundene $scope nicht mit?

0 Stimmen

Ist dieses verwirrende Zitat über "Vorherige Versionen..." mittlerweile entfernt worden? Dann wäre vielleicht ein Update angebracht?

0 Stimmen

Für Unittesting, wenn Sie 'this' anstelle von '$scope' verwenden, können Sie den Controller nicht mit einem gemockten Scope injizieren und somit keine Unittests durchführen. Ich glaube nicht, dass es eine gute Praxis ist, 'this' zu verwenden.

3voto

Kamil Szot Punkte 16381

Vorherige Versionen von Angular (vor 1.0 RC) erlaubten es, dies austauschbar mit der $scope-Methode zu verwenden, aber das ist nicht mehr der Fall. Innerhalb von auf dem Scope definierten Methoden sind this und $scope austauschbar (Angular setzt this auf $scope), aber nicht anderswo innerhalb Ihres Controller-Konstruktors.

Um dieses Verhalten wiederherzustellen (weiß jemand, warum es geändert wurde?) können Sie Folgendes hinzufügen:

return angular.extend($scope, this);

am Ende Ihrer Controller-Funktion (sofern $scope dieser Controller-Funktion übergeben wurde).

Dies hat den schönen Effekt, dass Sie über das Controller-Objekt auf den übergeordneten Scope zugreifen können, den Sie im Kind mit require: '^myParentDirective' erhalten können.

7 Stimmen

Dieser Artikel bietet eine gute Erklärung dafür, warum "this" und $scope unterschiedlich sind.

1voto

Aniket Jha Punkte 1691

$scope hat ein anderes 'this' als das Controller-'this'. Wenn Sie also ein console.log(this) im Controller platzieren, erhalten Sie ein Objekt (Controller) und this.addPane() fügt der Controller-Objekt die addPane-Methode hinzu. Aber das $scope hat einen anderen Bereich und alle Methoden in seinem Bereich müssen mit $scope.methodName() aufgerufen werden. this.methodName() im Controller bedeutet, Methoden zum Controller-Objekt hinzuzufügen. $scope.functionName() befindet sich im HTML und innerhalb

$scope.functionName(){
    this.name="Name";
    //oder
    $scope.myname="meinName"//sind gleich}

Fügen Sie diesen Code in Ihren Editor ein und öffnen Sie die Konsole, um zu sehen...

    this $sope vs controller

        var app=angular.module("myApp",[]);
app.controller("ctrlExample",function($scope){
          console.log("ctrl 'this'",this);
          //Das 'this'-Objekt des Controllers ist unterschiedlich vom $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);
              //Das 'this' des $scope
              $scope.message="Willkommen Benutzer";
          }

        });

       Von $SCOPE kommend: {{firstName}}

       Von $SCOPE kommend: {{lastName}}

       Sollte vom Controller kommen: {{nickName}}

            Der leere Nickname liegt daran, dass der Nickname an das 'this' des Controllers angehängt ist.

       Controller Methode

       Zeigen
       {{message}}

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X