2012-08-17 6 views
33

Hier ist mein Code:kann ich die Variablen eines übergeordneten Controllers erben?

function ParentCtrl($scope) { 
$scope.people = ["Tom", "Dick", "Harry"]; 
$scope.count = $scope.people.length; 
} 

function ChildCtrl($scope) { 
$scope.parentpeople = ParentCtrl.people //this is what I would like to do ideally 
} 

ich ein Winkel controller innerhalb eines anderen bin nisten. Ich würde gerne Variablen der ersten controller an die zweite übergeben. Weiß jemand, wie man das macht?

HINWEIS

ich nicht so etwas wie

ChildCtrl.prototype = new ParentCtrl(); 

, weil ich die people Eigenschaft des ChildCtrl überschreiben tun können.

+0

@ pkozlowski.opensource irgendwelche Gedanken? – dopatraman

+0

Verwenden Sie auch $ scope.people im Child-Controller - die Eigenschaften des Parents werden vererbt. –

Antwort

46

Standardmäßig erben unterordnete Bereiche prototypisch vom übergeordneten Bereich (siehe Scope), sodass Sie bereits Zugriff auf die $ scope-Eigenschaften des übergeordneten Controllers im untergeordneten Bereich haben. Um es zu beweisen:

9

Die $ scope-Vererbung basiert darauf, wo Sie Ihre Controller mit ng-controller referenzieren.

Wenn Sie so etwas wie

<div ng-controller="ParentController"> 
    <div ng-controller="ChildController"> 
    </div> 
</div> 

Dann haben ja, wird das Kind Controller die Eigenschaften des übergeordneten Controller erben.

Hinweis: Der untergeordnete Controller muss nicht auf dem direkten Kind im HTML definiert werden. Es kann jedes Kind sein.

+2

Ich kann Eigenschaften aus dem 'Parent' im' Child'' HTML-Markup verwenden, aber nicht im Code für den 'ChildController'. Wissen Sie, wie Sie in der Funktion "Child" die Eigenschaft "Parent's' people" verwenden? – dopatraman

+0

@codeninja Es wäre gut, wenn Sie eine detailliertere Anforderung geben könnten. Was versuchst du zu erreichen und was/wo bekommst du das Problem? – ganaraj

+0

Ich möchte in der Lage sein, die Eigenschaften der 'ParentCtrl' in der 'ChildCtrl' zu verwenden. Ich kann nicht mehr beschreibend sein ... – dopatraman

25

Sie bekommen Dinge falsch. Sie mischen die Controller-Vererbung mit der Bereichsvererbung, und sie sind in AngularJS unterschiedlich und lose gekoppelt.

Was Sie wirklich wollen, ist:

function ParentCtrl($scope) { 
    $scope.people = ["Tom", "Dick", "Harry"]; 
    $scope.count = $scope.people.length; 
} 

function ChildCtrl($scope) { 
    $scope.parentpeople = $scope.$parent.people; 
} 

Und es wird für den Fall arbeiten:

<div ng-controller="ParentCtrl"> 
    <div ng-controller="ChildCtrl"> 
    </div> 
</div> 

Aber wie Mark und ganaraj oben bemerkt, hat dies keinen Sinn, da Sie können Ihren Zugang Eigenschaft von $ scope.people von beiden ParentCtrl und ChildCtrl.

Wenn Sie Controller voneinander erben möchten, müssen Sie die Prototypvererbung der Controllerfunktionen selbst verwenden.

+1

Es gibt keine einfache Möglichkeit, Controller in AngularJS zu erben. – kstep

+1

Stimmen Sie mit Ihren Gedanken überein kstep. Ich war genauso verwirrt wie Codeninja in Bezug auf das, so schrieb ich einen Artikel darüber, Leute können es nützlich finden http://www.michaeldausmann.com/2013/01/angularjs-scope-vs-controller.html –

+0

@kstep Danke sehr viel ! Ich habe einen ganzen Tag gekämpft, um dieses Problem zu lösen und fand schließlich Ihre Antwort – Anas

4

Auch können Sie den Umfang jeder Controller von DOM erhalten:

$needleScope = angular.element(aDomElement).scope() 

jQuery verwenden:

$needleScope = $('#aDomElementId').scope() 

Sie alle Scope im Dokument erhalten:

$allScopes = $('.ng-scope').scope() 
0

Es könnte dir helfen!!!

Scope ist ein spezielles JavaScript-Objekt, das Controller mit Ansichten verbindet.Scope enthält Modelldaten. In Controllern wird auf Modelldaten über $ scope-Objekt zugegriffen.

<script> 
     var mainApp = angular.module("mainApp", []); 

     mainApp.controller("shapeController", function($scope) { 
     $scope.message = "In shape controller"; 
     $scope.type = "Shape"; 
     }); 
</script> 

Scope Inheritance Scope ist Controller spezifisch. Wenn wir verschachtelte Controller definieren, erbt der Kind-Controller den Bereich seines übergeordneten Controllers.

<script> 
     var mainApp = angular.module("mainApp", []); 

     mainApp.controller("shapeController", function($scope) { 
     $scope.message = "In shape controller"; 
     $scope.type = "Shape"; 
     }); 

     mainApp.controller("circleController", function($scope) { 
     $scope.message = "In circle controller"; 
     }); 
</script> 

Live-Beispiel wie unten angegeben.

<html> 
    <head> 
     <title>Angular JS Forms</title> 
    </head> 
    <body> 
     <h2>AngularJS Sample Application</h2> 
     <div ng-app="mainApp" ng-controller="shapeController"> 
      <p>{{message}} <br/> {{type}} </p> 
      <div ng-controller="circleController"> 
      <p>{{message}} <br/> {{type}} </p> 
      </div> 
      <div ng-controller="squareController"> 
      <p>{{message}} <br/> {{type}} </p> 
      </div> 
     </div> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
     <script> 
      var mainApp = angular.module("mainApp", []); 

      mainApp.controller("shapeController", function($scope) { 
      $scope.message = "In shape controller"; 
      $scope.type = "Shape"; 
      }); 

      mainApp.controller("circleController", function($scope) { 
      $scope.message = "In circle controller"; 
      }); 

      mainApp.controller("squareController", function($scope) { 
      $scope.message = "In square controller"; 
      $scope.type = "Square"; 
      }); 

     </script> 
    </body> 
    </html> 
+0

Mögliche ursprüngliche Quelle: [AngularJS - Scopes] (http://www.hackersit.com/angularjs-scopes/). –

+0

Mögliche Originalquelle: [Angular JS HTML für das Web verbessert] (http://slides.com/arunjames/angular-js#/11). –

+0

Mögliche Originalquelle: [Lerne AngularJS] (http://www.tutorialspoint.com/angularjs/angularjs_tutorial.pdf). –

Verwandte Themen