Giới thiệu về Scope và Directive trong AngularJs

Bài đăng này đã không được cập nhật trong 3 năm

Bài viết này mình sẽ giới thiệu về Scope và directive trong Angular mà mình đã có ứng dụng và hiểu được trong thời gian qua.

Scopes

Scopes là gì? Scopes là một đối tượng đề cập đến mô hình ứng dụng. Đó là một bối cảnh thực hiện cho các biểu thức. Scopes được sắp xếp theo cấu trúc phân cấp bắt chước cấu trúc DOM( Document Object Model ) của ứng dụng. Scope có thể xem các biểu thức và truyền các sự kiện.
Scope as Data-Model Scopes là phương thức giao tiếp giữa controller và view. Trong khuôn mẫu liên kết pha, directives thiết lập $watch trên phạm vi. $watch cho phép các directives được thông báo về sự thay đổi thuộc tính, cho phép directives hiển thị giá trị cập nhật cho DOM.

Cả controller và directives có tham chiếu đến scope, nhưng không phải với nhau. Sự sắp xếp này cô lập controller từ directives cũng như từ DOM. Đây là một điểm quan trọng khi chúng ta tạo controller trên view,nó làm cho mọi thứ hay ho hơn để test chuỗi xuyên suốt trên ứng dụng của mình.

sau đây là một ví dụ về scope: script.js

angular.module('scopeExample', [])
.controller('CommentsController', ['$scope', function($scope) {
  $scope.content = 'comment 1';

  $scope.contentComment = function() {
    $scope.comment = $scope.content;
  };
}]);

Trong ví dụ này mình khai báo một action ng-click ="contentComment()" có ý nghĩa rằng khi click vào đó thì nó sẽ gọi đến hàm contentComment() mà ta định nghĩa trong $scope ở controller. index.html

<div ng-controller="CommentsController">
  Your comment:
    <input type="text" ng-model="content">
    <button ng-click='contentComment()'>submit</button>
  <hr>
  {{comment}}
</div>

Trong hàm contentComment() có nhiệm vụ là đổi giá trị cho comment, điều này có nghĩa là nó đang gán lại giá trị cho view ở biểu thức {{comment}}.

<input type="text" ng-model="content">

Điều này có nghĩa rằng ta đang khai báo đây là một model với key của nó là content, muốn lấy dữ liệu của nó chỉ cần sử dụng $scope như sau "$scope.content", và muốn gán thì ta sẽ dùng cú pháp $scope.content = 'giá trị' kết quả: 3. Tìm hiều về $rootScope

script.js

myApp = angular.module('myApp', []);
 
myApp.controller("Controller1", function($scope, $rootScope){
    $rootScope.message = 'Hello';
});
 
myApp.controller("Controller2", function($scope){
});

index.html

<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>

Trong đoạn ví dụ này sự khác biệt chính là ở đoạn mã JS Controller thứ nhất có thêm tham số $rootScope, và ở đoạn Controller thứ hai thì không xử lý gì cả. Chạy lên các bạn sẽ thấy có 2 nội dụng là Hello Như vậy:

Để sử dụng $rootScope trong controller ta chỉ việc đưa nó vào tham số của hàm trong controller giống như $scope
Với $rootScope ta có thể truy xuất được các giá trị ở $scope ở tất cả các controller
$rootScope đóng vai trò là một $scope cha chứa toàn bộ $scope con
Nếu hai $scope có cùng key thì ở $rootScope khi gọi tới sẽ có tác dụng cho cả hai

Directives

1.Directives là gì? Directives là một thành phần mở rộng HTML, là các thuộc tính (properties) của các thẻ HTML mà Angular nó định nghĩa thêm, vì nó của riêng của Angular nên phải tuân thủ theo nguyên tắc của nó là chữ bắt đầu luôn luôn là ký tự mà tôi bôi đỏ ng-prefix, trong đó tiền tố prefix là tên của derective mà chúng ta sử dụng. sau đây mình sẽ ví dụ dùng 3 directives đó là ng-controller, ng-model và ng-bind:

<!doctype html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Ví dụ sử dụng Directive</title>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
      <script language="javascript">
        angular.module('myapp', [])
          .controller('MyController', function($scope) {
          $scope.content = 'Nhập nội dung và xem điều kì diệu';
        });
      </script>
    </head>
    <body ng-app="myapp">
      <div ng-controller="MyController">
        <h2>Nhập nội dung:</h2>
        <input ng-model="content"> <br/>
        <h2>Nội dung bạn đang gõ là:</h2>
        <span ng-bind="content"></span>
      </div>
    </body>
</html>

kết quả khi chạy: kết quả sau khi xóa hết input ban đầu và input vào lại: Ở ví dụ này, mục đích là khi nhập dữ liệu vào ô input thì ô kết quả sẽ thay đổi theo. 2. Danh sách AngularJS Directives thường dùng:

ng-app Khi khai báo một Directive ng-app thì AngularJS sẽ hiểu là bắt đầu một ứng dụng Angular, nó sẽ xác định đây là thẻ gốc (element root) và tiếp theo sẽ khởi tạo các thông số cấu hình bên trong mà ta gọi là bootstraps.
ng-init là khai báo dữ liệu khởi tạo khi ứng dụng vừa được chạy. Các dữ liệu này sẽ được dùng cho toàn bộ phạm vi của controller mà nó thuộc về. ví dụ:

<!doctype html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Ví dụ sử dụng Directive</title>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
      <script language="javascript">
        angular.module('myapp', [])
          .controller('MyController', ['$scope', function($scope) {}]);
      </script>
    </head>
    <body ng-app="myapp">
      <div ng-controller="MyController">
        <div my-customer ng-init="test='Test'">{{test}}</div>
        {{test}}
      </div>
      {{test}}
    </body>
</html>

kết quả: Như các bạn thấy, mình khai báo ba vị trí khác nhau với cùng key là test ({{test}}) nhưng chỉ có hai vị trí nhận được dữ liệu, lý do là vị trí cuối cùng năm ngoài Controller của data-init nên không thể nhận được...

ng-... Còn rất nhiều nhưng bài này mình chỉ mang tính chất giới thiệu nên sẽ không liệt kê ra nhiều và sẽ lần lượt tìm hiểu từng Directives cụ thể trong các bài sau nhé.

Tự định nghĩa Directives

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ví dụ sử dụng Directive</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script language="javascript">
      angular.module('myapp', [])
        .controller('MyController', function($scope) {
        //
      })
        .directive('myDirective', function() {
        return {
          template: '<h1>Angular js Directives</h1>'
        };
      });
    </script>
  </head>
  <body ng-app="myapp">
      <div ng-controller="MyController">
        <div my-directive></div>
      </div>
  </body>
</html>

kết quả: ở đây mình đã xây dựng một div và khai báo nó là một Directive

. Trong đoạn code JS mình sử dụng hàm khai báo một directive là:

  .directive('myDirective', function() {
    return {
      template: '<h1>Angular js Directives</h1>'
    };
  });

Trong đó myDirective tương ứng với my-directive, nghĩa là bạn tạo tên directive trong đoạn code JS thì tiền tố đầu tiên và tiền tố sau được nối lại và tiền tố sau viết chữ in hoa. Bên trong mình xử lý return về một object có key là template, key này chính là nội dung HTML bên trong của directive này.

Tóm lại:

Trên đây là nhưng gì mình đã tìm hiểu và biết được, nếu có gì các bạn hãy bình luận để bài viết mình được tốt hơn,

AngularJS

Scopes

Directives

Tóm lại:

Mục lục