2012-08-17 7 views
33

Ecco il mio codice:posso ereditare le variabili di un controllore genitore?

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 
} 

sto nidificazione uno angolare controller all'interno di un altro. Vorrei passare le variabili del primo controller al secondo. Qualcuno sa come fare questo?

NOTA

non riesco a fare qualcosa di simile

ChildCtrl.prototype = new ParentCtrl(); 

perché io sovrascrivere la proprietà people del ChildCtrl.

+0

@ pkozlowski.opensource qualsiasi pensiero? – dopatraman

+0

Utilizzare $ scope.people anche nel controller figlio: le proprietà del genitore vengono ereditate. –

risposta

46

Per impostazione predefinita, gli ambiti figlio ereditano prototipicamente dall'ambito principale (vedere Scope), quindi è già possibile accedere alle proprietà $ scope del controllore padre nel figlio. Per dimostrarlo:

function ChildCtrl($scope) { 
    alert($scope.people) 
} 
9

L'ereditarietà di $ scope si basa su dove si fa riferimento ai controller utilizzando ng-controller.

Se si dispone di qualcosa come

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

Allora sì, il controller bambino erediterà le proprietà del controller di genitore.

Nota: Il controller figlio non deve essere definito sul figlio diretto nell'html. Può essere qualsiasi bambino dentro

+2

Posso usare le proprietà da 'Parent' nella marcatura HTML' Child's', ma non nel codice per 'ChildController'. Sai come usare la proprietà 'people' di' Parent's nella funzione 'Child'? – dopatraman

+0

@codeninja Sarebbe bello se potessi dare un requisito più dettagliato. Cosa stai cercando di ottenere e cosa/dove stai ricevendo il problema! – ganaraj

+0

Voglio poter usare le proprietà di 'ParentCtrl' nel 'ChildCtrl'. Non so come essere più descrittivo ... – dopatraman

25

Ti stai sbagliando. Si sta mescolando l'ereditarietà del controller con l'ereditarietà dell'ambito e sono diversi e strettamente accoppiati in AngularJS.

cosa si vuole realmente è:

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

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

E si lavorerà per il caso:

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

Ma, come Marco e ganaraj notato sopra, questo non ha alcun senso, come è possibile accedere alla proprietà di $ scope.people da entrambi ParentCtrl e ChildCtrl.

Se si desidera ereditare i controllori l'uno dall'altro, è necessario utilizzare l'ereditarietà del prototipo delle funzioni del controller.

+1

Non esiste un modo semplice per ereditare i controller in AngularJS. – kstep

+1

D'accordo con i tuoi pensieri kstep. Sono stato altrettanto confuso quanto codeninja riguardo a questo, quindi ho scritto un articolo su di esso, la gente potrebbe trovarlo utile http://www.michaeldausmann.com/2013/01/angularjs-scope-vs-controller.html –

+0

@kstep Grazie molto ! Ho passato un'intera giornata a risolvere questo problema e alla fine ho trovato la tua risposta – Anas

4

Inoltre è possibile ottenere la portata di qualsiasi controllo da DOM:

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

utilizzando jQuery:

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

O ottenere tutte Scopo del documento:

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

Potrebbe Aiutarti!!!

Scope è uno speciale oggetto JavaScript che collega il controller alle viste.L'ambito contiene dati del modello. Nei controller, i dati del modello sono accessibili tramite l'oggetto $ scope.

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

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

Scope ereditarietà Scope è specifico controllore. Se definiamo i controller annidati, il controller figlio eredita l'ambito del controller principale.

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

Esempio dal vivo come indicato di seguito.

<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

Possibile fonte originale: [AngularJS - Scopes] (http://www.hackersit.com/angularjs-scopes/). –

+0

Possibile fonte originale: [Angular JS HTML migliorato per il web] (http://slides.com/arunjames/angular-js#/11). –

+0

Possibile fonte originale: [Learn AngularJS] (http://www.tutorialspoint.com/angularjs/angularjs_tutorial.pdf). –

Problemi correlati