AngularJS Scope

Ở các bài học về controller chúng ta đã làm việc với AngularJS scope thông qua sử dụng biến $scope trong hàm callback. Biến $scope này chính là một scope trong AngularJS mà chúng ta sẽ tìm hiểu ngay dưới đây.

AngularJS Scope Là Gì

Trong AngularJS thì scope đóng vai trò là cầu nối giữa việc bind dữ liệu trên trang HTML với dữ liệu trong ứng dụng AngularJS.

Scope về bản chất là một đối tượng JavaScript và nó có thuộc tính cũng như phương thức. Hãy nhớ lại đối tượng $scope trong ví dụ về controller ở bài học trước.

Chính vì là cầu nối nên đối tượng scope có thể được sử dụng cả trong trang HTML và trong controller. Ở ví dụ dưới đây chúng ta có đối tượng $scope với thuộc tính name:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{name}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.name = "Trần Văn Tí";
});
</script>

Chạy

Tất cả các thuộc tính của đối tượng $scope được khởi tạo trong controller myCtrlđều có thể sử dụng trong trang HTML.

Khi sử dụng thuộc tính của đối tượng $scope trong trang HTML thì chúng ta sẽ không đặt tiếp đầu ngữ $scope trước tên thuộc tính mà sẽ truy xuất giá trị này trực tiếp như 1 biến. Nghĩa là không viết $scope.name mà chỉ cần viết name.

Hiểu về mô hình MVC trong AngularJS

AngularJS là một khung làm việc (Framework) có cấu trúc Model-View-Controller (MVC) trong đó:

  • View: là trang HTML
  • Model: chứa dữ liệu của ứng dụng AngularJS
  • Controller: là các hàm JavaScript dùng để kiểm soát luồng hoạt động của ứng dụng AngularJS. Ví dụ: thay đổi giá trị bên trong các phần tử HTML.

Trong mô hình MVC trên thì scope đóng vai trò là model trong ứng dụng. Ở ví dụ dưới khi chúng ta thay đổi dữ liệu của trường input thì giá trị của biến name cũng sẽ thay đổi (model) và do đó giá trị của phần tử <h1> (view) cũng sẽ thay đổi.

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<h1>Tên bạn là {{name}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.name = "Lê Văn Tèo";
});
</script>

Chạy

AngularJS JavaScript
Thêm Bình Luận: