2016-07-31 4 views
0

Im folgenden Code übergeben wurde:

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="personCtrl"> 

First Name: <input type="text" ng-model="firstName"><br> 
Last Name: <input type="text" ng-model="lastName"><br> 
<br> 
Full Name: {{fullName()}} 

</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('personCtrl', function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
    $scope.fullName = function() { 
     return $scope.firstName + " " + $scope.lastName; 
    }; 
}); 
</script> 

</body> 
</html> 

Wie kann $scope.fullName auf eine Funktion eingestellt wird, die $scope verwendet, doch ist es nicht explizit übergeben?


I.e. warum:

$scope.fullName = function() { 

statt

$scope.fullName = function($scope) { 
+0

'$ scope' wird bereits in Ihre 'Controller'-Funktion injiziert. – developer033

+0

Dies ist sehr Grundlagen von Javascript. Lesen Sie über Bereiche und Funktionsparameter. – dfsq

+0

^Dies. Es muss nur 'function ($ scope) {}' sein, wenn die Funktion mit einem Argument aufgerufen wird (und hier ist es nicht: '{{fullName()}}'). Und '$ scope' sollte nicht an diese Funktion übergeben werden, da' $ scope' bereits im übergeordneten Funktionsumfang verfügbar ist. Wie gesagt, dies sind JS Grundlagen, sie sind nicht spezifisch für Angular. – estus

Antwort

1

Kurze Antwort: Da die fullname() Funktion Schließung hat über sie Eltern ist Umfang, die der Controller-Funktion ist.

Lange Antwort: JavaScript hat einen Funktionsumfang, der bedeutet, dass jede Funktion ihren eigenen Bereich erstellt. Scope ist im Grunde die Variablen und Funktionen, auf die eine Funktion zugreifen kann. Wenn Sie eine untergeordnete Funktion in einer übergeordneten Funktion haben, verfügt die untergeordnete Funktion über einen eigenen Bereich, hat aber auch Zugriff auf den Bereich der übergeordneten Funktion. Dies ist bekannt als Schließung - die untergeordnete Funktion hat eine Schließung über den Geltungsbereich der Eltern. Eine Funktion hat nicht nur Zugriff auf den Bereich des übergeordneten Elements, sondern auch auf den Umfang des Großelternteils und reicht bis zur gesamten Scope-Kette. Eine untergeordnete Funktion hat Schließung über den Umfang der Eltern, aber nicht umgekehrt.

Es ist wichtig zu beachten, dass die $ scope-Variable, die in Winkelsteuerungen injiziert wird, in JavaScript nicht identisch ist. Ich weiß, dass das eine Menge Leute verwirrt, die JavaScript über Angular lernen. Da die Variable $ scope im Bereich der Controller-Funktion existiert, hat jede untergeordnete Funktion Zugriff darauf. Die Tatsache, dass der Variablenname $ scope ist, ändert nichts an dem, was tatsächlich vor sich geht.

Ich habe wirklich über das beschönigt und ich empfehle, über Umfang und Verschlüsse in JavaScript nachzulesen.

Verwandte Themen