Eu configurei meus controladores usando data-ng-controller="xyzController as vm"
Eu tenho um cenário com controladores nesteds pai / filho. Não tenho nenhum problema em acessar as propriedades pai no html nested usando $parent.vm.property
, mas não consigo descobrir como acessar a propriedade pai a partir de meu controlador filho.
Eu tentei injetar $ scope e, em seguida, usando $scope.$parent.vm.property
, mas isso não está funcionando?
Alguém pode oferecer conselhos?
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 maneirafunction 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) { }
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.