angularJS: Üst kapsamda çocuk kapsam işlevi nasıl çağırılır

Alt kapsamda tanımlanan bir yöntemi üst kapsamından nasıl çağırabilirim?

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

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

http://jsfiddle.net/wUPdW/

Sen kullanabilirsiniz $broadcastbir ebeveynden çocuğa:

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

Çalışma keman: http://jsfiddle.net/wUPdW/2/

GÜNCELLEME : Daha az bağlı ve daha fazla test edilebilir başka bir sürüm var:

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

Keman: http://jsfiddle.net/uypo360u/

Başka bir çözüm önereyim:

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


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

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

Daha az kod ve prototip kalıtım kullanma.

Düşmek

Çocuk başlangıç ​​aşamasındayken çocuğun işlevini ebeveyne kaydedin. Şablonda netlik için "as" notasyonu kullandım.

ŞABLON

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

KONTROLÖRLER

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

"Ama" diyorsunuz, " ng-init bu şekilde kullanılmamalıdır !". Evet ama

1. bu dokümantasyon neden olmadığını açıklamıyor ve
2. Dokümantasyon yazarlarının bunun için TÜM olası kullanım durumlarını değerlendirdiğine inanmıyorum.

Bunun onun için iyi bir kullanım olduğunu söylüyorum. Bana olumsuz oy vermek istiyorsanız, lütfen nedenlerle yorum yapın! :)

Bu yaklaşımı seviyorum çünkü bileşenleri daha modüler tutuyor. Tek bağlamalar şablondadır ve şu anlama gelir:

• Çocuk Denetleyicinin hangi nesneye işlevini ekleyeceği hakkında hiçbir şey bilmesine gerek yoktur (@ canttouchit'in cevabında olduğu gibi)
• ebeveyn kontrolü, alma işlevine sahip başka herhangi bir çocuk kontrolü ile kullanılabilir
• yayın gerektirmez; bu, etkinlik ad alanını sıkı bir şekilde kontrol etmezseniz büyük bir uygulamada çok çirkinleşir

Bu yaklaşım , Tero'nun yönergelerle modülerleştirme fikrine daha yakından yaklaşır (modülerleştirilmiş örneğinde, contestantsŞABLON İÇİNDE ebeveynden "çocuk" yönergesine geçirildiğine dikkat edin ).

Aslında başka bir çözüm ChildCntl, bir yönerge olarak uygulamayı düşünmek &ve inityöntemi kaydetmek için bağlamayı kullanmak olabilir .

Alt nesne yapabilirsiniz.

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

Burada çocuk alma yönteminin hedefini kanıtlıyor.