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

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

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

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

http://jsfiddle.net/wUPdW/

Вы можете использовать $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/

ОБНОВЛЕНИЕ : есть еще одна версия, менее связная и более тестируемая:

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

Скрипка: http://jsfiddle.net/uypo360u/

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

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


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

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

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

Plunk

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

ШАБЛОН

<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-init - нельзя так использовать !». Ну да, но

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

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

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

• дочерний Контроллер не должен ничего знать о том, к какому объекту добавить свою функцию (как в ответе @ canttouchit)
• родительский элемент управления может использоваться с любым другим дочерним элементом управления, который имеет функцию получения
• не требует трансляции, что будет очень некрасиво в большом приложении, если вы не будете жестко контролировать пространство имен событий

Этот подход более близко подходит к идее Теро о модульности с помощью директив (обратите внимание, что в его модульном примере contestantsдиректива передается от родительской к «дочерней» В ШАБЛОНЕ).

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

Вы можете сделать дочерний объект.

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

Здесь ребенок доказывает назначение метода get.