Tìm hiểu AngularJs(p3)- directive
**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 ...
**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ẻ <div my-custommer > 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 :
-
ở đâ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></div>
-
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 <div my-customer></div> 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 $$cope 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é ...
