Tìm hiểu AngularJs(p3)- directive

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

1. Directive trong angularjs là gì

Directive là một đối tượng ta có thể định nghĩa nó thông qua thuộc tính của các thể html ví dụ như ng-app, ng-model, ng-controller, ng-click.... Để tìm hiểu rõ ràng hơn các bạn có thể vào trang chủ của angularjs :https://docs.angularjs.org/api/ng#directive
Xem 1 ví dụ về directive: mình sẽ hướng dẫn các bạn tạo 1 directive

<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>
      <div ng-app="myapp">
         <div ng-controller="Controller">
          <div my-customer></div>
        </div>
        </div>
      <script>
         angular.module('myapp', [])
         .controller('Controller', ['$scope', function($scope) {
         }])
         .directive('myCustomer', function() {
             return {
             template: 'hello yến '
             };
         });
      </script>
    </body>
</html>

xem demo tại đây http://jsfiddle.net/nukRe/334/
ở đây directive được khai báo ở myCustomer từ thẻ
khi khai báo thành directive sẽ chuyển thành myCustomer và chữ đầu tiên sau từ my sẽ viết hoa vi dụ ng-controller sẽ thành ngController, ng-form -> ngForm ....

2. TemplateUrl trong directive

Khi các bạn có làm 1 site viết code rất nhiều và muốn chia nhỏ chúng ra thành nhiều đoạn html #, hoặc dùng với mục đích sử dụng 1 lần code cho sử dụng lặp lại với nhiều site khác ta có thể sử dụng templateUrl trong angularjs
Để tạo 1 templateUrl trong angular js trước hết chúng ta xem ví dụ sau: tạo 1 forder lấy tên là myapp trong đó có 2 file là index.html và form.html ở index.html ta làm như sau:

<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>
      <div ng-app="myapp">
         <div ng-controller="Controller">
           <div my-form></div>
         </div>
      </div>
      <script>
         angular.module('myapp', [])
         .controller('Controller', ['$scope', function($scope) {
         }])
         .directive('myForm', function() {
             return {
             templateUrl: '../form.html '
             };
         });
      </script>
    </body>
    </html>

Chúng ta tạo 1 thêm 1 site form.html,trong file form.html ta khai báo như sau :

 <form>
   username: <input type="text">
   password: <input type="text">
   <input type="submit">
   </form>

Ta sẽ nhận được kết quả khi bật site index.html như hình sau :

Screen Shot 2015-11-27 at 4.09.35 PM.png

ở đây ta khai báo templateUrl :'../form.html' trang index sẽ gọi đến trang form.html , sẽ load vào đoạn ta mà ta định nghĩa và hiện ở đoạn ta định nghĩa <div my-form>
sẽ đơn giản hơn khi ta làm nhiều site cùng 1 nội dụng bằng cách dùng directiveUrl ta có thể gọi được mà không cần mất công làm những đoạn code giống nhau.
Để hiểu rõ hơn các bạn có thể vào đây https://docs.angularjs.org/guide/directive , ở đây sẽ hướng dẫn các bạn học dễ dàng về directive

3. directive restrict

Trong directive retrict sẽ quyết định directive sẽ hiện thị ở đâu và sẽ có tác dụng ở vị trí nào. Chúng ta thường sử dụng 3 vị trí element (E) , class (C), attribute (A)

-Xem ví dụ sau: khi lấy ví dụ ở vd1 thay retrict là E

<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>
      <div ng-app="myapp">
         <div ng-controller="Controller">
          <div my-customer></div>
        </div>
        </div>
      <script>
         angular.module('myapp', [])
         .controller('Controller', ['$scope', function($scope) {
         }])
         .directive('myCustomer', function() {
             return {
             template: 'hello yến ',
             restrict: "E"
             };
         });
      </script>
      </body>
</html>

bạn có thể xem demo : http://jsfiddle.net/nukRe/335/, http://jsfiddle.net/nukRe/336/ , http://jsfiddle.net/nukRe/337/ ở đoạn code thay retrict là E bạn sẽ ko thấy hiện dòng chữ hello yến nhưng khi thay là A bạn sẽ thấy hiện còn C cũng ko thấy hiện. ở đây
là attribute nên retrict sẽ hiện lên.

4. Cách directive trong angularjs gọi đến hàm

xét đoạn ví dụ sau:

    <body>
      <div ng-app="myapp">
         <div ng-controller="Controller">
          <div message>click here</div>
        </div>
        </div>
      <script>
         angular.module('myapp', [])
         .controller('Controller', ['$scope', function($scope) {
            $scope.showmessage = function(){
            alert("hello framgia");
            };
         }])
         .directive('message', function() {
             return function(scope, element, str) {
             element.bind('mouseenter', function(){
               scope.showmessage();
             });
             };
         });
      </script>
      </body>

Các bạn có thể xem demo ở đây http://jsfiddle.net/nukRe/340/ . ở đây ta dùng scope.showmessage() để gọi đến hàm showmessage khai báo controller. Sử dụng cùng $scope vì directive ở trong controller nên scope trong directive chính là scope trong controller nên khi gọi hàm scope.showmessage ở directive cũng chính là gọi scope.message ở controller.
Trong bài này mình đã giới thiệu sơ qua về directive về cách tạo 1 directive, templateUrl trong directive, restrict, directive gọi đến hàm. để biết chi tiết về hoạt động cách tạo directive các bạn có thể tìm hiểu ở link sau https://docs.angularjs.org/api/ng#directive , https://docs.angularjs.org/guide/directive hoặc video sau:

https://www.youtube.com/watch?v=0r5QvzjjKDchttps://www.youtube.com/watch?v=0r5QvzjjKDc

Cảm ơn các bạn đã xem bài viết, nếu đã xem qua vui lòng để lại vài nhận xét nhé ...

AngularJS

**1. Directive trong angularjs là gì **

**2. TemplateUrl trong directive **

3. directive restrict

4. Cách directive trong angularjs gọi đến hàm

Mục lục

1. Directive trong angularjs là gì

2. TemplateUrl trong directive