'this' vs $ scope in AngularJS-Controllern

Im Abschnitt "Komponenten erstellen" der AngularJS-Homepage 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 selectMethode hinzugefügt wird $scope, aber die addPaneMethode hinzugefügt wird this. Wenn ich es ändere $scope.addPane, bricht der Code.

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

In früheren Versionen von Angular (vor 1.0 RC) konnten Sie thisdie $scopeMethode austauschbar verwenden. Dies ist jedoch nicht mehr der Fall. Innerhalb von Methoden, die im Bereich definiert sind thisund $scopeaustauschbar sind (Winkelsätze thisauf $scope), aber nicht anders in Ihrem Controller-Konstruktor.

Wie funktioniert thisund $scopefunktioniert in AngularJS-Controllern?

"Wie funktioniert thisund $scopefunktioniert in AngularJS-Controllern?"

Kurze Antwort :

• this
  • Wenn die Controller-Konstruktorfunktion aufgerufen wird, thisist dies der Controller.
  • Wenn eine für ein $scopeObjekt definierte Funktion aufgerufen wird, thisist der "Gültigkeitsbereich gültig, als die Funktion aufgerufen wurde". Dies kann (oder auch nicht!) Sein, auf dem $scopedie Funktion definiert ist. Also, innerhalb der Funktion thisund $scopemöglicherweise nicht gleich.
• $scope
  • Jeder Steuerung ist ein $scopeObjekt zugeordnet.
  • Eine Controller- (Konstruktor-) Funktion ist dafür verantwortlich, Modelleigenschaften und -funktionen / -verhalten für die zugehörigen Funktionen festzulegen $scope.
  • Über $scopeHTML / view kann nur auf Methoden zugegriffen werden, die für dieses Objekt definiert sind (und übergeordnete Bereichsobjekte, wenn die prototypische Vererbung im Spiel ist). ZB von ng-click, Filtern usw.

Lange Antwort :

Eine Controller-Funktion ist eine JavaScript-Konstruktorfunktion. Wenn die Konstruktorfunktion ausgeführt wird (z. B. wenn eine Ansicht geladen wird), this(dh der "Funktionskontext"), wird das Controller-Objekt festgelegt. Also in der Controller-Konstruktorfunktion "tabs", wenn die addPane-Funktion erstellt wird

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

Es wird auf dem Controller-Objekt erstellt, nicht auf $ scope. Ansichten können die Funktion addPane nicht sehen - sie haben nur Zugriff auf Funktionen, die in $ scope definiert sind. Mit anderen Worten, im HTML funktioniert dies nicht:

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

Nachdem die Controller-Konstruktorfunktion "tabs" ausgeführt wurde, haben wir Folgendes:

Die gestrichelte schwarze Linie zeigt die prototypische Vererbung an - ein isolierter Bereich erbt prototypisch von Scope . (Es erbt nicht prototypisch von dem Gültigkeitsbereich, in dem die Direktive im HTML gefunden wurde.)

Jetzt möchte die Link-Funktion der Pane-Direktive mit der Tabs-Direktive kommunizieren (was wirklich bedeutet, dass sie die Tabs in irgendeiner Weise beeinflussen muss, um den Bereich zu isolieren). Ereignisse könnten verwendet werden, aber ein anderer Mechanismus besteht darin, dass die Fensteranweisung requireden Registerkarten-Controller enthält. (Es scheint keinen Mechanismus für die Fensteranweisung zu requireden Registerkarten $ scope zu geben.)

Dies wirft also die Frage auf: Wenn wir nur Zugriff auf den Tabs-Controller haben, wie erhalten wir Zugriff auf die Tabs, die $ scope isolieren (was wir wirklich wollen)?

Nun, die rot gepunktete Linie ist die Antwort. Der "Bereich" der Funktion addPane () (ich beziehe mich hier auf den Funktionsumfang / die Schließungen von JavaScript) ermöglicht der Funktion den Zugriff auf die Registerkarten, die $ scope isolieren. Dh addPane () hat Zugriff auf die "Registerkarten IsolateScope" im obigen Diagramm aufgrund eines Abschlusses, der beim Definieren von addPane () erstellt wurde. (Wenn wir stattdessen addPane () für das tabs $ scope-Objekt definieren würden, hätte die pane-Direktive keinen Zugriff auf diese Funktion und hätte daher keine Möglichkeit, mit den tabs $ scope zu kommunizieren.)

Zur Beantwortung des anderen Teils Ihrer Frage: how does $scope work in controllers?:

In Funktionen, die für $ scope definiert sind, thiswird "der Gültigkeitsbereich von $ festgelegt, in dem / wann die Funktion aufgerufen wurde". Angenommen, wir haben den folgenden HTML-Code:

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

Und das hat ParentCtrl(allein)

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

Wenn Sie auf den ersten Link klicken, wird dies angezeigt thisund $scopeist identisch, da " der Gültigkeitsbereich, der beim Aufruf der Funktion gültig war " der mit dem verknüpfte Gültigkeitsbereich ist ParentCtrl.

Den zweiten Link klicken , wird verraten thisund $scopesind nicht gleich, da „ der Umfang in Kraft , wenn die Funktion aufgerufen wurde “ ist der Umfang im Zusammenhang mit der ChildCtrl. Also hier thisist auf ChildCtrl's gesetzt $scope. Innerhalb der Methode $scopebefindet sich immer noch der Bereich ParentCtrl$.

Geige

Ich versuche, nicht thisinnerhalb einer in $ scope definierten Funktion zu verwenden, da es verwirrend wird, welcher $ scope betroffen ist, insbesondere wenn man bedenkt, dass ng-repeat, ng-include, ng-switch und Direktiven alle ihre eigenen untergeordneten Bereiche erstellen können.

Der Grund, warum 'addPane' diesem zugewiesen wird, liegt in der <pane>Direktive.

Die paneDirektive tut require: '^tabs', die das Registerkarten-Controller-Objekt von einer übergeordneten Direktive in die Verknüpfungsfunktion einfügt.

addPanewird zugewiesen, thisdamit die paneLink-Funktion es sehen kann. Dann ist in der paneLink-Funktion addPanenur eine Eigenschaft des tabsControllers und es ist nur tabsControllerObject.addPane. Die Verknüpfungsfunktion der Pane-Direktive kann also auf das Registerkarten-Controller-Objekt und damit auf die addPane-Methode zugreifen.

Ich hoffe, meine Erklärung ist klar genug. Es ist schwer zu erklären.

Ich habe gerade eine ziemlich interessante Erklärung über den Unterschied zwischen den beiden gelesen und eine wachsende Präferenz, Modelle an den Controller anzuhängen und den Controller als Alias ​​zu verwenden, um Modelle an die Ansicht zu binden. http://toddmotto.com/digging-into-angulars-controller-as-syntax/ ist der Artikel.
Er erwähnt es nicht, aber wenn Sie beim Definieren von Direktiven etwas zwischen mehreren Direktiven teilen müssen und keinen Dienst wünschen (es gibt legitime Fälle, in denen Dienste problematisch sind), hängen Sie die Daten an den Controller der übergeordneten Direktive an.

Der $scopeDienst bietet viele nützliche Dinge, $watchdie am offensichtlichsten sind. Wenn Sie jedoch nur Daten an die Ansicht binden müssen, ist die Verwendung des einfachen Controllers und des "Controllers als" in der Vorlage in Ordnung und wahrscheinlich vorzuziehen.

Ich empfehle Ihnen, den folgenden Beitrag zu lesen: AngularJS: "Controller as" oder "$ scope"?

Es beschreibt sehr gut die Vorteile der Verwendung von "Controller as", um Variablen gegenüber "$ scope" verfügbar zu machen.

Ich weiß, dass Sie speziell nach Methoden und nicht nach Variablen gefragt haben, aber ich denke, dass es besser ist, sich an eine Technik zu halten und mit dieser übereinzustimmen.

Meiner Meinung nach ist es aufgrund des im Beitrag behandelten Variablenproblems besser, einfach die Technik "Controller as" zu verwenden und sie auch auf die Methoden anzuwenden.

In diesem Kurs ( https://www.codeschool.com/courses/shaping-up-with-angular-js ) erklären sie, wie man "dies" und viele andere Dinge verwendet.

Wenn Sie dem Controller über "diese" Methode eine Methode hinzufügen, müssen Sie diese in der Ansicht mit dem Namen des Controllers "dot" für Ihre Eigenschaft oder Methode aufrufen.

Wenn Sie beispielsweise Ihren Controller in der Ansicht verwenden, haben Sie möglicherweise folgenden Code:

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

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

    </div>

In früheren Versionen von Angular (vor 1.0 RC) konnten Sie dies austauschbar mit der $ scope-Methode verwenden, dies ist jedoch nicht mehr der Fall. Innerhalb von Methoden, die für den Bereich definiert sind, sind this und $ scope austauschbar (Angle setzt dies auf $ scope), nicht jedoch 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 (vorausgesetzt, $ scope wurde in diese Controller-Funktion eingefügt).

Dies hat einen schönen Effekt, wenn Sie über ein Controller-Objekt, mit dem Sie untergeordnet werden können, auf den übergeordneten Bereich zugreifen können require: '^myParentDirective'

$ scope hat ein anderes 'this' als der Controller 'this'. Wenn Sie also ein console.log (this) in den Controller einfügen, erhalten Sie ein Objekt (controller) und this.addPane () fügt dem Controller-Objekt die addPane-Methode hinzu. Der Bereich $ hat jedoch einen anderen Bereich, und alle Methoden in seinem Bereich müssen von $ scope.methodName () aufgerufen werden. this.methodName()Inside Controller bedeutet, Methos innerhalb des Controller-Objekts hinzuzufügen. $scope.functionName()ist in HTML und drinnen

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

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

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