AngularJS Custom Directives example – Angular Directives
An Introduction to the AngularJS Directive
simple Custom directives define are used in AngularJS to simple extend the new functionality of HTML Browser side scripts.and Custom directives means html extends Dom uses are defined using simple “directive” function or methods.AngularJS – Custom Directives
Directives are Simple markers on a HTML DOM element
Like as
-an attribute,
-element name,
-comment
-CSS class
Angular Directives : Defining a Directive
script.js
var infinityknow = angular.module('infinityknow', []);
Now, define a directive.
infinityknow.directive(‘myDirective’, function() {
return {
restrict: ‘E’,
template: ‘<h1>I made a directive!</h1>’
};
});
HTML
<body ng-app=infinityknow>
<my-directive></my-directive>
</body>
custom directive in angularjs With Example
<html>
<head>
<title>AngularJS Custom Directives example - Angular Directives</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "infinityknow" ng-controller = "livectrl">
<weblist name = "live24u"></weblist><br/>
<weblist name = "tutorial"></weblist>
</div>
<script src = "angular.min.js"></script>
<script>
var infinityknow = angular.module("infinityknow", []);
infinityknow.directive('weblist', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "weblist: <b>{{weblist.name}}</b> , Rank No: <b>{{weblist.rankno}}</b>";
directive.scope = {
weblist : "=name"
}
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("weblist: <b>"+$scope.weblist.name +"</b> , Rank No: <b>"+$scope.weblist.rankno+"</b><br/>");
element.css("background-color", "red");
}
return linkFunction;
}
return directive;
});
infinityknow.controller('livectrl', function($scope) {
$scope.live24u = {};
$scope.live24u.name = "live24u websitename";
$scope.live24u.rankno = 1;
$scope.tutorial = {};
$scope.tutorial.name = "tutorial websitename";
$scope.tutorial.rankno = 2;
});
</script>
</body>
</html>
