Nếu bạn muốn gọi một bộ điều khiển vào một bộ điều khiển khác, có bốn phương thức khả dụng
- $ rootScope. $ emit () và $ rootScope. $ Broadcast ()
- Nếu bộ điều khiển thứ hai là con, bạn có thể sử dụng giao tiếp cha mẹ.
- Sử dụng dịch vụ
- Loại hack - với sự trợ giúp của angular.element ()
1. $ rootScope. $ Emit () và $ rootScope. $ Broadcast ()
Trình điều khiển và phạm vi của nó có thể bị phá hủy, nhưng $ rootScope vẫn còn trên ứng dụng, đó là lý do tại sao chúng tôi đang dùng $ rootScope vì $ rootScope là cha mẹ của tất cả các phạm vi.
Nếu bạn đang thực hiện giao tiếp từ cha mẹ đến con cái và thậm chí con muốn giao tiếp với anh chị em của nó, bạn có thể sử dụng $ Broadcast
Nếu bạn đang thực hiện giao tiếp từ trẻ đến cha mẹ, không có anh chị em nào tham gia thì bạn có thể sử dụng $ rootScope. $ Emit
HTML
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
Mã Angularjs
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
Trong bảng điều khiển mã ở trên của $ emit 'childEmit' sẽ không gọi bên trong anh chị em ruột và Nó sẽ chỉ gọi bên trong cha mẹ, trong đó $ Broadcast cũng được gọi bên trong anh chị em và cha mẹ. Đây là nơi mà hiệu suất bắt đầu hoạt động. $ Emit là tốt hơn, nếu bạn đang sử dụng giao tiếp của con cái với cha mẹ vì nó bỏ qua một số kiểm tra bẩn.
2. Nếu Bộ điều khiển thứ hai là con, bạn có thể sử dụng giao tiếp Cha mẹ con
Đây là một trong những phương pháp tốt nhất, Nếu bạn muốn thực hiện giao tiếp cha mẹ trẻ , nơi trẻ muốn giao tiếp với cha mẹ ngay lập tức thì không cần bất kỳ loại $ Broadcast hay $ emit nào nhưng nếu bạn muốn giao tiếp từ cha mẹ với con thì bạn phải sử dụng dịch vụ hoặc $ Broadcast
Ví dụ: HTML: -
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Angularjs
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
Bất cứ khi nào bạn đang sử dụng giao tiếp con với cha mẹ, Angularjs sẽ tìm kiếm một biến bên trong con, Nếu nó không có bên trong thì nó sẽ chọn xem các giá trị bên trong bộ điều khiển cha.
3.Sử dụng dịch vụ
AngularJS hỗ trợ các khái niệm "Phân chia mối quan tâm" bằng cách sử dụng kiến trúc dịch vụ. Dịch vụ có chức năng javascript và có trách nhiệm thực hiện nhiệm vụ cụ thể only.This làm cho họ một thực thể riêng biệt mà là duy trì và kiểm chứng .Services sử dụng để tiêm sử dụng Dependency Injection mecahnism của Angularjs.
Mã Angularjs:
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
Nó sẽ cho đầu ra Hello Child World và Hello Parent World. Theo tài liệu Angular của dịch vụ Singletons - Mỗi thành phần phụ thuộc vào một dịch vụ sẽ được tham chiếu đến một thể hiện duy nhất được tạo bởi nhà máy dịch vụ .
4.Tạo hack - với sự trợ giúp của angular.element ()
Phương thức này lấy scope () từ phần tử bởi phương thức Id / unique.angular.element () của nó trả về phần tử và scope () cung cấp biến phạm vi $ của một biến khác bằng biến $ scope của một bộ điều khiển bên trong một bộ điều khiển khác không phải là một cách làm tốt.
HTML: -
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
Angularjs: -
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
Trong các bộ điều khiển mã ở trên đang hiển thị giá trị riêng của chúng trên Html và khi bạn nhấp vào văn bản, bạn sẽ nhận được các giá trị trong bảng điều khiển tương ứng. Nếu bạn nhấp vào nhịp của bộ điều khiển chính, trình duyệt sẽ điều khiển giá trị của con và ngược lại.