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)
• การควบคุมหลักสามารถใช้กับการควบคุมลูกอื่น ๆ ที่มีฟังก์ชัน get
• ไม่จำเป็นต้องออกอากาศซึ่งจะดูน่าเกลียดมากในแอปขนาดใหญ่เว้นแต่คุณจะควบคุมเนมสเปซของเหตุการณ์

แนวทางนี้เข้าใกล้แนวคิดของ Tero ในเรื่องการสร้างโมดูลด้วยคำสั่งมากขึ้น (โปรดทราบว่าในตัวอย่างแบบแยกส่วนของเขา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";    
    };
});

เด็กที่นี่กำลังพิสูจน์ปลายทางของวิธีการรับ