[Học AngularJS] - Bài 05 - $rootScope
Trong video này chúng ta sẽ tìm hiểu thành phần $rootScope trong agularjs. Ở video trước chúng ta đã tìm hiểu về $scope rồi và chắc các bạn cũng hiểu tác dụng của nó rồi, vậy $rootScope cũng có tác dụng tương tự nhưng có một điểm hơi khác biệt.

Trong mỗi controller sẽ có một $scope riêng biệt và không đụng lẫn nhau nên bạn hoàn toàn khai báo hai key giống nhau ở $scope của 2 controller mà nó không hề đụng tới nhau. Và $rootScope sẽ bao gồm toàn bỏ tất cả các $scope trong controller đó.
# Tạo hai controller ở HTML và file app.js
File: index.html
Bài viết này được đăng tại [free tuts .net]
<body ng-app="myApp">
<div ng-controller="Controller1">
<input type="text" ng-model="message"/>
{{message}}
</div>
<div ng-controller="Controller2">
<input type="text" ng-model="message"/>
{{message}}
</div>
</body>File app.js
myApp = angular.module('myApp', []);
myApp.controller("Controller1", function($scope){
$scope.message = 'Chào mừng các bạn đến với freetuts.net';
});
myApp.controller("Controller2", function($scope){
$scope.message = 'Học lập trình online freetuts.net';
});Chạy lên bạn sẽ thấy hai dòng chữ ở hai controller khác nhau.
# Sửa lại file app.js
Bây giờ ta tiến hành sửa nội dung của file app.js lại như sau:
myApp = angular.module('myApp', []);
myApp.controller("Controller1", function($scope, $rootScope){
$rootScope.message = 'Chào mừng các bạn đến với freetuts.net';
});
myApp.controller("Controller2", function($scope){
});Chạy lên các bạn thấy cả hai controller đều có cùng nội dung, nhưng nếu bạn nhập vào ô input thì nội dung sẽ không giống nhau nữa nhé.
Vậy ta có kết luận:
- Để sử dụng
$rootScopetrong controller ta chỉ việc đưa nó vào tham số của hàm trong controller giống như $scope - Với
$rootScopeta có thể truy xuất được các giá trị ở$scopeở tất cả các controller $rootScopeđóng vai trò là một$scopecha chứa toàn bộ$scopecon- Nếu hai
$scopecó cùng key thì ở$rootScopekhi gọi tới sẽ có tác dụng cho cả hai
# Sử dụng dấu chấm
Bây giờ ta sửa lại cả hai file như sau:
File index.html
<body ng-app="myApp">
<div ng-controller="Controller1">
<input type="text" ng-model="data.message"/>
{{data.message}}
</div>
<div ng-controller="Controller2">
<input type="text" ng-model="data.message"/>
{{data.message}}
</div>
</body>
File app.js
myApp = angular.module('myApp', []);
myApp.controller("Controller1", function($scope, $rootScope){
});
myApp.controller("Controller2", function($scope){
});Ở controller trong file app.js tôi đã không làm gì cả, bây giờ bạn thử nhập dữ liệu và xem cả hai controller không hề dính líu tới nhau phải không nào.
Như vậy thay vì khai báo message thì ta có thể khai báo là data.message hoặc một cái tên bất kì, miễn là ở html khai báo sao thì trong $scope để sử dụng bạn phải khai báo y chang vậy.
# Summary
$rootScope là một thành phần $scope cha, nó có lợi thế là ở controller A bạn có thể sử dụng data ở controlller B một cách đơn giản thông qua biến $rootScope toàn cục.

Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..)
Chia lấy phần dư / chia lấy phần nguyên trong javascript
Các cách khai báo biến trong Javascript
Các sự kiện (Event) trong Javascript
Hướng tạo thanh search bar bằng CSS
Hàm array.slice() trong Javascript
Tính tổng hai số bằng Javascript (cộng hai số)
Cách khai báo biến trong PHP, các loại biến thường gặp
Download và cài đặt Vertrigo Server
Thẻ li trong HTML
Thẻ article trong HTML5
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên
Cách dùng thẻ img trong HTML và các thuộc tính của img
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng