AngularJS accede al ámbito principal desde el controlador de juegos

Configuré mis controladores usando data-ng-controller="xyzController as vm"

Tengo un escenario con controladores nesteds padre / hijo. No tengo problemas para acceder a las propiedades principales en el html nested utilizando $parent.vm.property , pero no puedo encontrar la forma de acceder a la propiedad principal desde mi controlador secundario.

Intenté inyectar $ scope y luego usar $scope.$parent.vm.property , pero esto no está funcionando?

¿Alguien puede ofrecer un consejo?

Si su HTML es el siguiente, podría hacer algo como esto:

 

Luego puede acceder al scope principal de la siguiente manera

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

Si desea acceder a un controlador principal desde su vista, debe hacer algo como esto:

 
{{$parent.property}}

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

Actualizar

En realidad, dado que definió cities en el controlador principal, su controlador secundario heredará todas las variables de ámbito. Entonces, teóricamente, no tiene que llamar a $parent . El ejemplo anterior también se puede escribir de la siguiente manera:

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

Los documentos de AngularJS utilizan este enfoque, aquí puede leer más sobre $scope .

Otra actualización

Creo que esta es una mejor respuesta para el 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; } 

Si usa el controller as método, también puede acceder al scope principal de la siguiente manera

 function ChildCtrl($scope) { var vm = this; vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc" } 

Como puede ver, hay muchas maneras diferentes de acceder a $scopes .

Fiddle actualizado

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

Acabo de consultar

 $scope.$parent.someProperty 

funciona para mi.

y será

 {{$parent.someProperty}} 

para la vista.

Cuando está utilizando as syntax, como ParentController as parentCtrl , para definir un controlador, para acceder a la variable de ámbito principal en el controlador de niños, use lo siguiente:

 var id = $scope.parentCtrl.id; 

Donde parentCtrl es el nombre del controlador principal utilizando as syntax e id es una variable definida en el mismo controlador.

Algunas veces es posible que deba actualizar las propiedades principales directamente dentro del scope del hijo. por ejemplo, es necesario guardar una fecha y hora del control principal después de los cambios realizados por un controlador secundario. por ejemplo, código en 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) { } 

También puede eludir la herencia del scope y almacenar cosas en el ámbito “global”.

Si tiene un controlador principal en su aplicación que envuelve a todos los demás controladores, puede instalar un “enlace” al scope global:

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

Luego, en cualquier controlador secundario, puede acceder al scope “global” con $scope.root . Todo lo que establezcas aquí será globalmente visible.

Ejemplo:

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

someGlobalVar value: {{someGlobalVar}}

Creo que tuve un dilema similar recientemente

 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 } 

Mi configuración fue un poco diferente, pero lo mismo debería funcionar

Desde un componente secundario, puede acceder a las propiedades y métodos del componente principal con ‘require’. Aquí hay un ejemplo:

Padre:

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

Niño:

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

Quizás esto es poco convincente, pero también puedes señalarlos a ambos en algún objeto externo:

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

El beneficio aquí es que las ediciones en ChildCtrl ahora propocionan de nuevo a los datos en el padre.