angularJS: Jak wywołać funkcję zakresu potomka w obszarze nadrzędnym

Question

Jak wywołać metodę zdefiniowaną w zasięgu podrzędnym z jej zakresu nadrzędnego?

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

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

http://jsfiddle.net/wUPdW/

Answer 1

Można użyć $broadcast od rodzica do dziecka:

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

skrzypce robocza: http://jsfiddle.net/wUPdW/2/

UPDATE: Jest jeszcze inna wersja, mniej sprzężonej i bardziej testowalny:

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

Pozwól mi zaproponować inne rozwiązanie:

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


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

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

Mniej kod i za pomocą prototypowego dziedziczenia.

Plunk

Answer 3

Zarejestruj funkcję dziecka na rodzica, gdy dziecko jest inicjalizacji. Użyłem "notacji" jako jasności w szablonie.

WZÓR

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

STEROWNIKI

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

"Ale", można powiedzieć, "ng-initisn't supposed to be used this way!". No tak, ale

1. że dokumentacja nie wyjaśnia, dlaczego nie, i
2. Nie wierzę, autorzy dokumentacji rozważeniu wszystkich możliwych przypadków użycia dla niego.

Mówię, że to dobry użytek. Jeśli chcesz mnie zlekceważyć, skomentuj powody! :)

Podoba mi się to podejście, ponieważ utrzymuje elementy bardziej modułowe. Jedyne powiązania są w szablonie, a to oznacza, że ​​

• dziecko Kontroler nie musi nic wiedzieć o który obiekt, aby dodać swoją funkcję (jak w odpowiedzi @ canttouchit za)
• kontrola rodzic może być używany z dowolnym innym child Control, który posiada funkcję get
• nie wymaga transmisji, która będzie bardzo brzydki w wielkim aplikacji, chyba że ściśle kontrolować nazw zdarzeń

Takie podejście bliżej podejść Tero's idea of modularising with directives (uwaga w jego modularis ed example, contestants jest przekazywana z nadrzędnej do dyrektywy "potomnej" W SZABLONIE).

Rzeczywiście innym rozwiązaniem może być rozważenie wdrożenia ChildCntl jako dyrektywy i użycie wiązania & do zarejestrowania metody init.