angularJS: cómo llamar a la función de scope de elemento secundario en el ámbito principal

¿Cómo se puede llamar a un método definido en el ámbito hijo desde su ámbito principal?

function ParentCntl() { // I want to call the $scope.get here } function ChildCntl($scope) { $scope.get = function() { return "LOL"; } } 

http://jsfiddle.net/wUPdW/

Puede usar $broadcast del padre a un hijo:

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

Violín de trabajo: http://jsfiddle.net/wUPdW/2/

ACTUALIZACIÓN : hay otra versión, menos acoplada y más comprobable:

 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/

Déjame sugerir otra solución:

 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 y uso de herencia prototípica.

Ruido sordo

Registre la función del niño en el padre cuando el niño se está iniciando. Usé la notación “como” para mayor claridad en la plantilla.

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

“Pero”, dices, “¡ se supone que ng-init no debe usarse de esta manera !”. Bueno, sí, pero

  1. esa documentación no explica por qué no, y
  2. No creo que los autores de la documentación consideraron TODOS los casos de uso posibles para ello.

Yo digo que este es un buen uso para eso. Si quieres rechazarme, por favor comenta con razones! 🙂

Me gusta este enfoque porque mantiene los componentes más modulares. Las únicas vinculaciones están en la plantilla, y significa que

  • el Controlador hijo no tiene que saber nada sobre a qué objeto agregar su función (como en la respuesta de @ canttouchit)
  • el control principal se puede usar con cualquier otro control secundario que tenga una función get
  • no requiere transmisión, lo que se pondrá muy feo en una gran aplicación a menos que controle estrictamente el espacio de nombres del evento

Este enfoque se acerca más a la idea de Tero de modularizar con directivas (nótese que en su ejemplo modularizado, los contestants pasan de la directiva de los padres a la de “niño” EN LA PLANTILLA).

De hecho, otra solución podría ser considerar implementar el ChildCntl como una directiva y usar el & binding para registrar el método init .

Puedes hacer que el objeto hijo

 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"; }; }); 

Aquí el niño está probando el destino del método get.