'this' vs $ scope in AngularJS-Controllern

Der Grund für 'addPane' ist auf die <pane>-Direktive zurückzuführen.

Die pane-Direktive macht require: '^tabs', wodurch das Controller-Objekt der Registerkarten aus einer übergeordneten Direktive in die Link-Funktion eingefügt wird.

addPane ist this zugewiesen, damit die pane link-Funktion sie sehen kann. In der pane link-Funktion ist addPane nur eine Eigenschaft des tabs-Controllers und nur tabsControllerObject.addPane. Die Verknüpfungsfunktion der Bereichsanweisung kann also auf das Controller-Objekt der Registerkarten und somit 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 Vorliebe, Modelle an den Controller anzuschließen und den Controller als Alias ​​zu bezeichnen, 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 Richtlinien definieren, müssen Sie die Daten an den Controller der übergeordneten Direktive anhängen, wenn Sie etwas für mehrere Anweisungen freigeben möchten und keinen Dienst wünschen (es gibt legitime Fälle, in denen Dienste unangenehm sind). Der $ scope-Dienst bietet viele nützliche Dinge, wobei $ watch das offensichtlichste ist. Wenn Sie jedoch nur Daten an die Ansicht binden müssen, ist die Verwendung des einfachen Controllers und des Controllers in der Vorlage in Ordnung und möglicherweise 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 über "$ scope" bereitzustellen.

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 konsistent zu sein. 

Meiner Meinung nach ist es wegen des in der Post diskutierten Variablenproblems besser, die "Controller as" -Technik zu verwenden und sie auch auf die Methoden anzuwenden.

In diesem Kurs ( https://www.codeschool.com/courses/shaping-up-with-angular-js ) wird erklärt, wie man "this" 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" Ihrer 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 diese .__ verwenden. austauschbar mit der $ scope-Methode, aber dies ist nicht mehr die Fall. Innerhalb der im Geltungsbereich definierten Methoden sind dies und $ austauschbar (Winkel setzt dies auf $ scope), aber sonst nicht in Ihrem Controller-Konstruktor.

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

return angular.extend($scope, this);

am Ende Ihrer Controller-Funktion (vorausgesetzt, dass $ scope in diese Controller-Funktion eingefügt wurde).

Dies hat eine gute Wirkung, wenn Sie über ein Controller-Objekt auf den übergeordneten Bereich zugreifen können, das Sie mit require: '^myParentDirective' in das untergeordnete Objekt aufnehmen können.

$ scope hat ein anderes 'this' als der Controller 'this'. Wenn Sie also eine 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. $ Scope hat jedoch einen anderen Gültigkeitsbereich, und alle Methoden in seinem Gültigkeitsbereich müssen über $ scope.methodName () .this.methodName() im Controller aufgerufen werden. Das bedeutet, Methos im Controller-Objekt hinzuzufügen .$scope.functionName() ist in HTML und inside 

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

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