angularJS: Come chiamare la funzione scope child nello scope parent

Question

Come può chiamare un metodo definito nello scope figlio dall'ambito padre?

function ParentCntl() { 
    // I want to call the $scope.get here 
} 

function ChildCntl($scope) { 
    $scope.get = function() { 
     return "LOL";  
    } 
} 

http://jsfiddle.net/wUPdW/

Answer 1

È possibile utilizzare $broadcast dal padre per un figlio:

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

violino di lavoro: http://jsfiddle.net/wUPdW/2/

UPDATE: C'è un'altra versione, meno accoppiati e più testabile:

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/

Answer 2

Mi permetto di suggerire un'altra soluzione:

var app = angular.module("myNoteApp", []); 


app.controller("ParentCntl", function($scope) { 
    $scope.obj = {}; 
}); 

app.controller("ChildCntl", function($scope) { 
    $scope.obj.get = function() { 
      return "LOL";  
    }; 
}); 

meno codice e utilizzando l'ereditarietà prototipo.

Plunk

Answer 3

Registro Funzione del bambino sul genitore quando il bambino è in fase di inizializzazione. Ho usato la notazione "as" per chiarezza nel template.

MODELLO

<div ng-controller="ParentCntl as p"> 
    <div ng-controller="ChildCntl as c" ng-init="p.init(c.get)"></div> 
</div> 

CONTROLLORI

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

"Ma", si dicono: "ng-initisn't supposed to be used this way!". Beh, sì, ma

1. che la documentazione non spiega perché no, e
2. non credo di documentazione degli autori considerati tutti i possibili casi di utilizzo per esso.

Dico questo è un buon uso per questo. Se vuoi farmi una votazione, per favore commenta con le ragioni! :)

Mi piace questo approccio perché mantiene i componenti più modulari. Gli unici attacchi sono nel modello, e significa che

• il bambino controller non deve sapere nulla di quale oggetto per aggiungere la funzione in (come nella risposta di @ canttouchit)
• controllo padre può essere utilizzato con qualsiasi altro controllo figlio che ha una funzione get
• non necessita di radiodiffusione, che otterrà molto brutto in una grande applicazione a meno che non si controlla strettamente lo spazio dei nomi evento

Questo approccio si avvicina di più a stretto contatto Tero's idea of modularising with directives (nota quello nella sua modularis ed esempio, contestants viene passato dalla direttiva madre alla direttiva "figlio" NEL MODELLO).

In effetti un'altra soluzione potrebbe essere considerare l'implementazione di ChildCntl come una direttiva e utilizzare il binding & per registrare il metodo init.