Initializing scope variables in controllern

Also ich bin völlig neu in AngularJS und folgte einem Kurs und begann zu "lernen" dieses Framework. Ich beobachtete die 2 Screencasts an der Spitze dieser Seite:Initializing scope variables in controllern

https://github.com/curran/screencasts/tree/gh-pages/introToAngular

Nachdem beide Screencasts zu beobachten und Blick in einige der Beispiele, die ich versuchte, meine eigene einfache Angular-Anwendung zu erstellen, wo ich versuchte, mit einigen Controllern zu arbeiten. Jetzt habe ich den folgenden Code:

Index.HTML

<html ng-app="WIMT"> 
<head> 
    <title>trying out angularJS</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script type="text/javascript" src="../bower_components/angular/angular.min.js"></script> 
    <script type="text/javascript" src="../JS/app.js"></script> 

</head> 
<body> 

<div ng-controller="controllerA as a"> 
    {{a.varA}} 
</div> 

<div ng-controller="controllerB as b"> 
    {{b.varB}} 
</div> 

<div ng-controller="controllerC as c"> 
    {{c.varC}} 
</div> 

</body> 
</html>

(function() { 

var app = angular.module('WIMT',[]); 


app.controller('controllerA',function($scope,$http){ 
    $scope.varA = "A"; 
}); 

app.controller('controllerB',['$scope',function($scope) { 
    $scope.varB = "B"; 
} 
]); 

app.controller('controllerC',function($scope, $http) { 
    var reg = this; 

    reg.varC = "C"; 
}); 

})();

Nachdem ich versuchte varA auf den Umfang zu binden, in Controller gefunden AI darauf hin, dass es didn Ich arbeite nicht und habe im Internet nach einer Lösung gesucht. Ich habe ein paar verschiedene Wege gefunden (B & C), die funktionieren sollten (könnten?). Nur Option C funktioniert und zeigt C, wenn ich den HTML-Code ausführe. Beide A & B zeigen nichts.

Warum funktionieren die Optionen A und B in diesem Beispiel nicht?

Quelle

2016-06-01 Niek Jonkman

Btw, Sie müssen Ihre eckige App nicht in einer selbstausführenden anonymen Funktion einbetten. – Kyle

Da Sie controllerAs Syntax verwenden, ist das der Grund, warum der dritte funktioniert und die ersten beiden sind nicht.

<div ng-controller="controllerA as a"> 
    {{a.varA}} 
</div> 

<div ng-controller="controllerB as b"> 
    {{b.varB}} 
</div> 

<div ng-controller="controllerC as c"> 
    {{c.varC}} 
</div>

Wenn Sie die a.varA und b.varB drucken möchten, müssen Sie unten ändern:

<div ng-app="app"> 
    <div ng-controller="controllerA as a"> 
    {{varA}} 
    </div> 

    <div ng-controller="controllerB as b"> 
     {{varB}} 
    </div> 

    <div ng-controller="controllerC as c"> 
     {{c.varC}} 
    </div> 
</div>

http://jsfiddle.net/t0hhp5wz/

Quelle

2016-06-01 12:43:54 Thalaivar

Danke für Ihre Reaktion, Ihre Lösung funktioniert. Aber das hinterlässt mir eine Frage: Warum würde ich controllerA als ein verwenden, wenn ich a.varA nicht direkt sondern varA verwende? –

Sie sollten nicht verwenden, ich habe Ihnen nur ein Beispiel zum Drucken gegeben ... es ist am besten, Controller als Syntax über $ Scope zu verwenden. – Thalaivar

das ist ziemlich das Gleiche:

app.controller('controllerA',function($scope,$http){ 
    $scope.varA = "A"; 
});

Diese Syntax funktioniert, wenn Sie die Minimierung verwenden, die vorherige Nr t.

app.controller('controllerB',['$scope',function($scope) { 
    $scope.varB = "B"; 
} 
]);

verwenden diese Syntax in der Ansicht:

<div ng-controller="controllerA"> 
    {{varA}} 
</div>

Quelle

2016-06-01 12:45:32 AlainIb

Es wird allgemein als beste Methode angesehen, die controllerAs-Syntax zu verwenden. Nicht dieser. –

da Sie controller as alias verwenden, Option A & B innerhalb Controller Bereiche gelegt, die childScopes von $scope sind.

wenn Sie console.log die $scope Sie werden sehen, Option A & B innerhalb Steuerungsbereich erstellt und nicht in $scope die übergeordneten Bereich für diesen Controller ist.

Quelle

2016-06-01 12:51:22

'$ scope' ist der Bereich des Controllers. 'controller as' fügt dem scope den ** controller als ** -Eigenschaft hinzu. – zeroflagL

Controller-Bereich ...? Ich dachte, der für den Controller spezifische Bereich wird erstellt, wenn wir den Direktivenansatz verwenden. Bitte klärt mich dazu auf. –

'ng-controller' erstellt einen Bereich, auf den mit' $ scope' im Controller zugegriffen werden kann. 'controller as vm' fügt dem Bereich die Controller-Instanz als Eigenschaft' vm' hinzu. Innerhalb des Controllers wäre 'this 'gleich $ scope.vm. Also wäre 'this.a' gleich $ scope.vm.a und' {{vm.a}} 'in der Vorlage. Aber es gibt nur einen Bereich, nicht zwei, wie Ihre Antwort suggeriert. – zeroflagL

Initializing scope variables in controllern

Antwort

Verwandte Themen