angleJS: Aufrufen der untergeordneten Bereichsfunktion im übergeordneten Bereich

Wie kann eine im untergeordneten Bereich definierte Methode aus dem übergeordneten Bereich aufgerufen werden?

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

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

http://jsfiddle.net/wUPdW/

Sie können $broadcastvom Elternteil zum Kind verwenden:

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

Arbeitsgeige: http://jsfiddle.net/wUPdW/2/

UPDATE : Es gibt eine andere Version, die weniger gekoppelt und besser testbar ist:

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

Geige: http://jsfiddle.net/uypo360u/

Lassen Sie mich eine andere Lösung vorschlagen:

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


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

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

Weniger Code und prototypische Vererbung.

Zupfen

Registrieren Sie die Funktion des Kindes beim Elternteil, wenn das Kind initialisiert wird. Ich habe aus Gründen der Übersichtlichkeit in der Vorlage die Notation "als" verwendet.

VORLAGE

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

CONTROLLER

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

"Aber", sagen Sie, " ng-init soll nicht so verwendet werden !". Na ja, aber

1. Diese Dokumentation erklärt nicht, warum nicht, und
2. Ich glaube nicht, dass die Dokumentationsautoren ALLE möglichen Anwendungsfälle dafür in Betracht gezogen haben.

Ich sage, das ist eine gute Verwendung dafür. Wenn Sie mich ablehnen möchten, kommentieren Sie bitte mit Gründen! :) :)

Ich mag diesen Ansatz, weil er die Komponenten modularer hält. Die einzigen Bindungen befinden sich in der Vorlage und bedeuten dies

• Der untergeordnete Controller muss nichts darüber wissen, welchem ​​Objekt er seine Funktion hinzufügen soll (wie in der Antwort von @ canttouchit).
• Das übergeordnete Steuerelement kann mit jedem anderen untergeordneten Steuerelement verwendet werden, das eine get-Funktion hat
• erfordert keine Übertragung, was in einer großen App sehr hässlich wird, wenn Sie den Ereignis-Namespace nicht genau kontrollieren

Dieser Ansatz nähert sich Teros Idee der Modularisierung mit Direktiven näher an (beachten Sie, dass in seinem modularisierten Beispiel die contestantsAnweisung IN DER VORLAGE von der übergeordneten zur "untergeordneten" Direktive übergeben wird).

In der Tat könnte eine andere Lösung darin bestehen, die Implementierung der ChildCntlRichtlinie in Betracht zu ziehen und die &Bindung zur Registrierung der initMethode zu verwenden.

Sie können ein untergeordnetes Objekt erstellen.

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

Hier beweist das Kind das Ziel der Get-Methode.