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

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

Менше коду та використання прототипічного успадкування.

Планку

Зареєструйте функцію дитини на батьків, коли дитина ініціалізується. Я використовував позначення "як" для наочності в шаблоні.

ТЕМПЛАТ

<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)
• батьківський контроль можна використовувати з будь-яким іншим дочірнім контролем, який має функцію get
• не вимагає трансляції, що стане дуже потворним у великому додатку, якщо ви не будете жорстко контролювати простір імен подій

Цей підхід більш детально підходить до ідеї Теро про модуляцію з директивами (зауважте, що в його модульованому прикладі contestantsпередається ВІД ТЕМПЛАТИ від батьківської до "дочірньої" директиви).

Дійсно, іншим рішенням може бути розгляд використання ChildCntlдирективи та використання &прив'язки для реєстрації 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.