Tìm hiểu AngularJs(p3)- directive
Bài đăng này đã không được cập nhật trong 2 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 :
-
ở đâ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é ...
All rights reserved
