AngularJs Scope được tổ chức theo dạng phân cấp và lồng nhau. Mỗi ứng dụng có duy nhất 1 $rootScope. Các $scope khác đều kế thừa và nằm dưới nó.
Trường hợp bạn muốn chia sẽ dữ liệu giữa các controller, thì có rất nhiều cách khác nhau.
Angularjs hỗ trợ 2 phương thức: $broadcast và $emit. Vận dụng 2 hàm này, bạn có thể chia sẽ dữ liệu dễ dàng, đặc biệt là nó rất hữu ích khi bạn làm ứng dụng Single Page Application.
$broadcast: lan truyền sự kiện xuống các con của nó
$emit: lan truyền sự kiện theo hướng lên trên
Ví dụ về broadcast
Để lan truyền sự kiện từ 1 controller đến tất cả controller còn lại, bạn tạo 1 service để thực hiện việc lan truyền từ rootScope.
Ví dụ 1:
//Lan truyền sự kiện notifyMessageChange
$rootScope.$broadcast("notifyMessageChange");
//....
//Để nhận sự kiện, child controller dùng hàm $on
$scope.$on("notifyMessageChange", function(){
//code
});
Ví dụ 2:
<div class="container" ng-app="myapp">
<div ng-controller="ACtrl">
<label>A Controller:</label>
<div class="form-group">
<label for="broadcastMessage">Input message</label>
<input type="text" class="form-control" id="broadcastMessage" placeholder="Enter your message" ng-model="message">
<br />
<button class="btn btn-primary" ng-click="notify()">Notify</button>
</div>
Result: <div>{{message}}</div>
</div>
<div ng-controller="BCtrl">
<label>B Controller:</label><div>{{message}}</div>
</div>
<div ng-controller="CCtrl">
<label>C Controller:</label><div>{{message}}</div>
</div>
</div>
var shareModule = angular.module("shareModule", []);
shareModule.factory("shareService", function($rootScope){
var shareService = {};
shareService.message = "";
shareService.broadcastMessage = function(message){
shareService.message = message;
$rootScope.$broadcast("notifyMessageChange");
}
return shareService;
});
var myApp = angular.module("myapp",["shareModule"]);
//service style, probably the simplest one
myApp.controller("ACtrl", function($scope, shareService){
$scope.message = "Broadcast Message";
$scope.notify = function(){
shareService.broadcastMessage($scope.message);
};
$scope.$on("notifyMessageChange", function(){
$scope.message = shareService.message;
});
});
myApp.controller("BCtrl", function($scope, shareService){
$scope.message = "Broadcast Message";
$scope.$on("notifyMessageChange", function(){
$scope.message = shareService.message;
});
});
myApp.controller("CCtrl", function($scope, shareService){
$scope.message = "Broadcast Message";
$scope.$on("notifyMessageChange", function(){
$scope.message = shareService.message;
});
});
Ví dụ về $emit
$emit dùng để giao tiếp event giữa child và parent.
myApp.controller("ParentCtrl", function($scope){
$scope.$on("notifyChange", function(event, message){
$scope.childMessage = message;
});
myApp.controller("ChildCtrl", function($scope){
$scope.onButtonClick = function(){
$scope.$emit("notifyChange", $scope.message); //pass arrayData
};
});
Ví dụ 2: Kết hợp $broadcast với $emit
<div class="container" ng-app="myapp">
<div ng-controller="ParentCtrl">
<div class="row">
<h3>Parent Controller</h3>
<div>
Child message: {{childMessage}}
</div>
<div class="col-xs-2">
<input type="text" class="form-control" placeholder="your message" ng-model="broadcastMessage">
</div>
<button ng-click="notifyAll()" class="btn btn-primary">Broadcast</button>
</div>
<div class="row" ng-controller="ChildCtrl">
<h3>Child 1</h3>
<div>
Parent message: {{parentMessage}}
</div>
<div class="col-xs-2">
<input type="text" class="form-control" placeholder="your message" ng-model="message">
</div>
<button ng-click="onButtonClick()" class="btn btn-primary">Emit</button>
</div>
<div class="row" ng-controller="Child2Ctrl">
<h3>Child 2</h3>
<div>
Parent message: {{parentMessage}}
</div>
<div class="col-xs-2">
<input type="text" class="form-control" placeholder="your message" ng-model="message">
</div>
<button ng-click="onButtonClick()" class="btn btn-primary">Emit</button>
</div>
</div>
</div>
var myApp = angular.module("myapp",[]);
//service style, probably the simplest one
myApp.controller("ParentCtrl", function($scope){
$scope.$on("notifyChange", function(event, message){
$scope.childMessage = message;
});
$scope.notifyAll = function(){
$scope.$broadcast('updateParentMessage', $scope.broadcastMessage);
}
});
myApp.controller("ChildCtrl", function($scope){
$scope.onButtonClick = function(){
$scope.$emit("notifyChange", $scope.message); //pass arrayData
}
$scope.$on("updateParentMessage", function(event, message){
$scope.parentMessage = message;
})
});
myApp.controller("Child2Ctrl", function($scope){
$scope.onButtonClick = function(){
$scope.$emit("notifyChange", $scope.message); //pass arrayData
}
$scope.$on("updateParentMessage", function(event, message){
$scope.parentMessage = message;
})
});
Chúc các bạn thành công!
Nguồn: http://nhatkyhoctap.blogspot.com/2014/01/angularjs-giao-tiep-giua-cac-controller.html