AngularJS acessa o escopo pai do controlador filho

Se o seu HTML é como abaixo você poderia fazer algo assim:

Então você pode acessar o escopo pai da seguinte forma

 function ParentCtrl($scope) { $scope.cities = ["NY", "Amsterdam", "Barcelona"]; } function ChildCtrl($scope) { $scope.parentcities = $scope.$parent.cities; } 

Se você quiser acessar um controlador pai da sua visão, você precisa fazer algo assim:

 
 {{$parent.property}}  

Veja jsFiddle: http://jsfiddle.net/2r728/

Atualizar

Na verdade, desde que você definiu cities no controlador pai, seu controlador filho herdará todas as variables ​​de escopo. Então, teoricamente, você não precisa chamar $parent . O exemplo acima também pode ser escrito da seguinte maneira:

 function ParentCtrl($scope) { $scope.cities = ["NY","Amsterdam","Barcelona"]; } function ChildCtrl($scope) { $scope.parentCities = $scope.cities; } 

Os documentos do AngularJS usam essa abordagem, aqui você pode ler mais sobre o $scope .

Outra atualização

Acho que esta é uma resposta melhor para o pôster original.

HTML

 
 
 
{{cc.parentCities | json}}
{{pc.cities | json}}


 
  JS 
 function ParentCtrl() { var vm = this; vm.cities = ["NY", "Amsterdam", "Barcelona"]; } function ChildCtrl() { var vm = this; ParentCtrl.apply(vm, arguments); // Inherit parent control vm.parentCities = vm.cities; } 
  Se você usar o controller as método, também poderá acessar o escopo pai da seguinte maneira 
 function ChildCtrl($scope) { var vm = this; vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc" } 
  Como você pode ver, existem muitas maneiras diferentes de acessar $scopes . 

  Violino atualizado 


 function ParentCtrl() { var vm = this; vm.cities = ["NY", "Amsterdam", "Barcelona"]; } function ChildCtrl($scope) { var vm = this; ParentCtrl.apply(vm, arguments); vm.parentCitiesByScope = $scope.pc.cities; vm.parentCities = vm.cities; } 
  
 
 
{{cc.parentCities | json}}
{{cc.parentCitiesByScope | json }}
{{pc.cities | json}}


 

Acabei de verificar

 $scope.$parent.someProperty 

funciona para mim.

e será

 {{$parent.someProperty}} 

para a vista.

Quando você estiver usando as syntax, como ParentController as parentCtrl , para definir um controlador, em seguida, para acessar a variável de escopo pai no uso do controlador filho, a seguir:

 var id = $scope.parentCtrl.id; 

Onde parentCtrl é o nome do controlador pai usando as syntax e id é uma variável definida no mesmo controlador.

Algumas vezes você pode precisar atualizar as propriedades pai diretamente no escopo filho. por exemplo, precisa salvar uma data e hora de controle pai após alterações por um controlador filho. Por exemplo, código no JSFiddle

HTML

 
 
 event.date = {{event.date}} 
 event.time = {{event.time}} 
 
 event.date = {{event.date}}
 event.time = {{event.time}}
 
 event.date: 
 event.time: 
 
  

JS

  function Parent($scope) { $scope.event = { date: '2014/01/1', time: '10:01 AM' } } function Child($scope) { } 

Você também pode contornar a inheritance de escopo e armazenar coisas no escopo “global”.

Se você tem um controlador principal em seu aplicativo que envolve todos os outros controladores, você pode instalar um “gancho” para o escopo global:

 function RootCtrl($scope) { $scope.root = $scope; } 

Em seguida, em qualquer controlador filho, você pode acessar o escopo “global” com $scope.root . Tudo o que você definir aqui será globalmente visível.

Exemplo:

 function RootCtrl($scope) { $scope.root = $scope; } function ChildCtrl($scope) { $scope.setValue = function() { $scope.root.someGlobalVar = 'someVal'; } } function OtherChildCtrl($scope) { } 

  
 
 Set someGlobalVar 
 
 someGlobalVar value: {{someGlobalVar}} 
  

Eu acredito que eu tive um dilema semelhante recentemente

 function parentCtrl() { var pc = this; // pc stands for parent control pc.foobar = 'SomeVal'; } function childCtrl($scope) { // now how do I get the parent control 'foobar' variable? // I used $scope.$parent var parentFoobarVariableValue = $scope.$parent.pc.foobar; // that did it } 

Minha configuração foi um pouco diferente, mas a mesma coisa provavelmente ainda funcionaria

A partir de um componente filho, você pode acessar as propriedades e os methods do componente pai com ‘require’. Aqui está um exemplo:

Pai:

 .component('myParent', mymodule.MyParentComponent) ... controllerAs: 'vm', ... var vm = this; vm.parentProperty = 'hello from parent'; 

Criança:

 require: { myParentCtrl: '^myParent' }, controllerAs: 'vm', ... var vm = this; vm.myParentCtrl.parentProperty = 'hello from child'; 

Talvez isso seja coxo, mas você também pode apontar para ambos em algum object externo:

 var cities = []; function ParentCtrl() { var vm = this; vm.cities = cities; vm.cities[0] = 'Oakland'; } function ChildCtrl($scope) { var vm = this; vm.cities = cities; } 

O benefício aqui é que as edições em ChildCtrl agora se propagam de volta para os dados no pai.