angularJS: Como chamar a function de escopo filho no escopo pai

Como pode 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"; } } 

http://jsfiddle.net/wUPdW/

Você pode usar $broadcast do pai para um 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"; } } 

Violino: http://jsfiddle.net/uypo360u/

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 inheritance prototípica.

Plunk

Registre a function da criança no pai quando a criança estiver inicializando. Eu usei “como” notação para maior clareza no modelo.

MODELO

 

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 deveria ser usado dessa maneira !” Bem, sim, mas

  1. essa documentação não explica por que não, e
  2. Eu não acredito que os autores da documentação consideraram todos os possíveis casos de uso para isso.

Eu digo que isso é um bom uso para isso. Se você quiser me downvote, por favor, comente as razões! 🙂

Eu gosto dessa abordagem porque mantém os componentes mais modulares. As únicas ligações estão no modelo e significa que

  • o controlador filho não precisa saber nada sobre qual object adicionar sua function (como na resposta do @ canttouchit)
  • o controle pai pode ser usado com qualquer outro controle filho que tenha uma function get
  • não requer transmissão, o que ficará muito feio em um aplicativo grande, a menos que você controle com firmeza o namespace do evento

Esta abordagem aproxima-se mais da ideia de Tero de modularizar com directivas (note que no seu exemplo modularizado, os contestants são passados ​​de pai para diretiva “child” IN THE TEMPLATE).

Na verdade, outra solução pode ser considerar a implementação do ChildCntl como uma diretiva e usar o & binding para registrar o método init .

Você pode fazer object 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.