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

Question

Làm thế nào để gọi một phương thức được xác định trong phạm vi con từ phạm vi cha mẹ 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/

Answer 1

Bạn có thể sử dụng $broadcast từ cha mẹ cho một đứa trẻ:

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

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

CẬP NHẬT: Có phiên bản khác, ít kết và thử nghiệm nhiều 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/

Answer 2

Tôi xin gợi ý 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ã và sử dụng thừa kế nguyên mẫu.

Plunk

Answer 3

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

MẪU

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

KIỂM SOÁT

... 
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-initisn't supposed to be used this way!". Vâng, vâng, nhưng

1. tài liệu mà không giải thích lý do tại sao không, và
2. Tôi không tin rằng các tác giả tài liệu được coi là trường hợp sử dụng ALL có thể cho nó.

Tôi nói đây là cách sử dụng tốt cho nó. Nếu bạn muốn downvote tôi, xin vui lòng bình luận với lý do! :)

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

• đứa trẻ điều khiển không cần phải biết gì về những đối tượng để thêm chức năng của nó để (như trong câu trả lời @ canttouchit của)
• điều khiển cha mẹ có thể sử dụng với bất kỳ kiểm soát trẻ em khác trong đó có một chức năng get
• không yêu cầu phát sóng, mà sẽ nhận được rất xấu xí 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 gần gũi hơn Tero's idea of modularising with directives (lưu ý trong mô-đun của mình ví dụ ed, contestants được chuyển từ cấp độ gốc sang chỉ mục "con" trong MẪU).

Thực tế giải pháp khác có thể là xem xét việc triển khai ChildCntl làm chỉ thị và sử dụng liên kết & để đăng ký phương thức init.