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
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
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>