angleJS: Cách gọi hàm phạm vi con trong phạm vi cha

Làm cách nào để gọi một phương thức được định nghĩa trong phạm vi con từ phạm vi cha của nó?

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

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

http://jsfiddle.net/wUPdW/

Bạn có thể sử dụng $broadcasttừ cha mẹ đến con cái:

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

Làm việc fiddle: http://jsfiddle.net/wUPdW/2/

CẬP NHẬT : Có một phiên bản khác, ít ghép hơn và dễ kiểm tra hơn:

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/

Hãy để tôi đề xuất một giải pháp khác:

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


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

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

Ít mã hơn và sử dụng kế thừa nguyên mẫu.

Plunk

Đăng ký chức năng của trẻ trên cha mẹ khi trẻ đang khởi tạo. Tôi đã sử dụng ký hiệu "as" để rõ ràng trong mẫu.

BẢN MẪU

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

NGƯỜI ĐIỀU KHIỂN

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

"Nhưng", bạn nói, " ng-init không được sử dụng theo cách này !". Vâng, vâng, nhưng

1. tài liệu đó không giải thích tại sao không, và
2. Tôi không tin rằng các tác giả tài liệu đã xem xét TẤT CẢ các trường hợp sử dụng có thể cho nó.

Tôi nói đây là một công dụng tốt cho nó. Nếu bạn muốn downvote tôi, hãy comment với lý do! :)

Tôi thích cách tiếp cận này vì nó giữ cho các thành phần mô-đun hơn. Các ràng buộc duy nhất có trong mẫu và có nghĩa là

• Bộ điều khiển con không phải biết bất kỳ điều gì về đối tượng nào để thêm chức năng của nó vào (như trong câu trả lời của @ canttouchit)
• kiểm soát của cha mẹ có thể được sử dụng với bất kỳ kiểm soát con nào khác có chức năng get
• không yêu cầu phát sóng, điều này sẽ rất xấu trong một ứng dụng lớn trừ khi bạn kiểm soát chặt chẽ không gian tên sự kiện

Cách tiếp cận này tiếp cận chặt chẽ hơn với ý tưởng của Tero về việc điều biến với các chỉ thị (lưu ý rằng trong ví dụ contestantsđược điều chỉnh của anh ấy, được chuyển từ chỉ thị mẹ sang chỉ thị "con" TRONG TEMPLATE).

Thật vậy, một giải pháp khác có thể là xem xét việc triển khai ChildCntlnhư một chỉ thị và sử dụng &ràng buộc để đăng ký initphương thức.

Bạn có thể làm cho đối tượng trẻ em.

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

Ở đây con đang chứng minh đích đến của phương thức get.