angularJS: Как вызвать функцию дочерней области видимости в родительской области

Question

Как вызвать метод, определенный в области дочерних объектов, из его родительской области?

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

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

http://jsfiddle.net/wUPdW/

Answer 1

Вы можете использовать $broadcast от родителя к ребенку:

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

Работа скрипку: http://jsfiddle.net/wUPdW/2/

UPDATE: Там будет другая версия, менее связанной и более тестируемым:

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

Позвольте мне предложить другое решение:

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


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

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

Меньше кода и использования прототипичный наследования.

Plunk

Answer 3

Регистрация функции ребенка на родителей, когда ребенок инициализируется. Я использовал «как» обозначение для ясности в шаблоне.

ШАБЛОН

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

КОНТРОЛЛЕРЫ

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

"Но", вы говорите, "ng-initisn't supposed to be used this way!". Ну, да, но

1. , что документация не объясняет, почему нет, и
2. Я не верю, что авторы документации рассмотрены все возможные варианты использования для него.

Я говорю, что это хорошо для этого. Если вы хотите сфокусировать меня, прокомментируйте причины! :)

Мне нравится этот подход, потому что он сохраняет компоненты более модульными. Единственные привязки в шаблоне, и означает, что

• ребенка контроллер не должен ничего знать о том, какой именно объект, чтобы добавить свою функцию (как в ответ @ canttouchit в)
• родительский контроль может быть использовать с любым другим дочернего элемента управления, который имеет функцию ПОЛУЧИТЬ
• не требует вещания, который получит очень некрасиво в большом приложении, если вы плотно не контролировать пространство имен событий

Этот подход более близко подходит Tero's idea of modularising with directives (примечание что в его модуле ed, contestants передается от родительской к «дочерней» директиве В ШАБЛОНЕ).

Действительно, другим решением может быть рассмотреть вопрос об использовании ChildCntl в качестве директивы и использовать привязку & для регистрации метода init.