Como posso chamar um método definido no escopo filho de seu escopo pai?
function ParentCntl() {
// I want to call the $scope.get here
}
function ChildCntl($scope) {
$scope.get = function() {
return "LOL";
}
}
Como posso chamar um método definido no escopo filho de seu escopo pai?
function ParentCntl() {
// I want to call the $scope.get here
}
function ChildCntl($scope) {
$scope.get = function() {
return "LOL";
}
}
Respostas:
Você pode usar $broadcast
de pai para filho:
function ParentCntl($scope) {
$scope.msg = "";
$scope.get = function(){
$scope.$broadcast ('someEvent');
return $scope.msg;
}
}
function ChildCntl($scope) {
$scope.$on('someEvent', function(e) {
$scope.$parent.msg = $scope.get();
});
$scope.get = function(){
return "LOL";
}
}
Trabalhando violino: http://jsfiddle.net/wUPdW/2/
ATUALIZAÇÃO : Existe outra versão, menos acoplada e mais testável:
function ParentCntl($scope) {
$scope.msg = "";
$scope.get = function(){
$scope.$broadcast ('someEvent');
return $scope.msg;
}
$scope.$on('pingBack', function(e,data) {
$scope.msg = data;
});
}
function ChildCntl($scope) {
$scope.$on('someEvent', function(e) {
$scope.$emit("pingBack", $scope.get());
});
$scope.get = function(){
return "LOL";
}
}
Fiddle: http://jsfiddle.net/uypo360u/
$scope.$parent
ou em $scope.$parent.$parent
etc.)? Ah, sim: passe um callback em params! :)
$emit
de um filho para um pai. Acho que é hora de atualizar minha resposta.
$parent
)
$broadcast
e você pode eliminar o pingBack
completamente.
Deixe-me sugerir outra solução:
var app = angular.module("myNoteApp", []);
app.controller("ParentCntl", function($scope) {
$scope.obj = {};
});
app.controller("ChildCntl", function($scope) {
$scope.obj.get = function() {
return "LOL";
};
});
Menos código e usando herança prototípica.
$scope.obj.get()
seja uma função válida.
Registre a função da criança no pai quando a criança estiver inicializando. Usei a notação "como" para maior clareza no modelo.
MODELO
<div ng-controller="ParentCntl as p">
<div ng-controller="ChildCntl as c" ng-init="p.init(c.get)"></div>
</div>
CONTROLADORES
...
function ParentCntl() {
var p = this;
p.init = function(fnToRegister) {
p.childGet = fnToRegister;
};
// call p.childGet when you want
}
function ChildCntl() {
var c = this;
c.get = function() {
return "LOL";
};
}
"Mas", você diz, " ng-init
não deve ser usado desta forma !". Bem sim, mas
Eu digo que este é um bom uso para isso. Se você quiser me negar, por favor, comente com os motivos! :)
Gosto dessa abordagem porque mantém os componentes mais modulares. As únicas ligações estão no modelo e significa que
Essa abordagem se aproxima mais da ideia de Tero de modularização com diretivas (observe que, em seu exemplo modularizado, contestants
a diretiva é passada de pai para "filho" NO MODELO).
Na verdade, outra solução pode ser considerar a implementação do ChildCntl
como uma diretiva e usar a &
vinculação para registrar o init
método.
Você pode fazer um objeto filho.
var app = angular.module("myApp", []);
app.controller("ParentCntl", function($scope) {
$scope.child= {};
$scope.get = function(){
return $scope.child.get(); // you can call it. it will return 'LOL'
}
// or you can call it directly like $scope.child.get() once it loaded.
});
app.controller("ChildCntl", function($scope) {
$scope.obj.get = function() {
return "LOL";
};
});
Aqui, a criança está provando o destino do método get.