2016-02-10 4 views
13

Here erwähnt der Autor

the $scope object used by the two controllers are not the same $scope object 

Snippet für das gleiche:

enter image description here

enter image description here

nun eine kleine Änderung an den obigen Code in Betracht ziehen.

<body ng-app="myapp"> 
    <div ng-controller="myController1"> 

     <div>{{data.theVar}}</div> 
     <div>{{data.common}}</div> 

     <div ng-controller="myController2"> 
      <div>{{data.theVar}}</div> 
      <div>{{data.common}}</div> 
      <div>{{temp}}</div> 
      <div>{{newTemp}}</div> 
     </div> 

    </div> 
    <script> 
     var module = angular.module("myapp", []); 
     var myController1 = module.controller("myController1", function($scope) { 
      $scope.data = { 
       theVar : "Value One", 
       common : "common Value" 
      }; 

      $scope.temp = "John Wick 2 is going to be released soon"; 
     }); 

     var myController2 = module.controller("myController2", function($scope) { 
      $scope.data = { 
       theVar : "Value Two" 
      }; 

      $scope.newTemp = $scope.temp; 
      console.log(""); 

     }); 
    </script> 
</body> 

Die Ansicht, die Controller2 entspricht, wurde innerhalb der Ansicht für Controller1 verschoben.

Für dieses Stück Code innerhalb des controller2,

$scope.newTemp = $scope.temp; 

enter image description here

Sind $ scope über ein und dasselbe Objekt markiert?

Wenn ja, woher weiß AngularJS das?

Wären sie gleiche worden, $scope.temp in controller2 würde und so undefiniert dann $scope.newTemp?

Für mich sind sie nicht die gleichen, die o/p des obigen Programms berücksichtigen. Siehe unten:

enter image description here

Aber dann, ich bin verwirrt, warum sie beide kommt als einer & das gleiche, wenn ich debuggen, enter image description here

Wie funktioniert AngularJS zugreifen können Wert von $scope.temp von Controller1 in Controller2?
Bitte klären?

Schließlich

enter image description here

Antwort

10

Altough es wahr ist, dass die $scope in zwei Controller verwendet werden, sind nicht die gleichen, können sie einander die Eigenschaften erben. Angulars $scope s sind wie ein Baum, der Stamm ist der $rootScope und jeder andere $scope Zweige von diesem oder einem anderen $scope, so, da Ihr myController2 ein Kind von myController1 ist, können Sie auf die Variablen darin zugreifen.

$rootScope -> myController1 -> myController2 

Die myController2 können alle $scope Mutter zugreifen, die myController1$rootScope und nur selbst Zugriff auf die $rootScope zugreifen können.

+0

Warum zeigt der Google Chrome-Debugger nicht die Eigenschaften (in Bezug auf $ scope von controller1) in $ scope von controller2 an? –

+3

Es tut, aber es ist in '__proto__' –

+0

Martijn: Oh ja. Habe diesen grundlegenden Punkt nicht bemerkt. Nun, danke für das Gleiche. –

3

Für Ihren letzten Teil, da beide Controller Eigenschaft über den Namen data haben, wird angular in den aktuellen Bereich zuerst suchen und dann hierarchisch nach oben verschieben, d. Daher legt Winkel data im Bereich des zweiten Controllers selbst an und muss daher nicht auf den Gültigkeitsbereich data des übergeordneten Elements verweisen. Aber es gibt keinen common Schlüssel in dieser Eigenschaft und gibt daher nichts aus.

Schauen Sie in controller as Syntax von eckigen, es ist beabsichtigt, diese Konflikte in Schach zu halten.

Verwandte Themen