Custom Directive For As Element and Attribute

Posted by Swappy_Gaj under ASP.NET category on | Points: 40 | Views : 314
Here we are enhancing the HTML power by creating the Custom Directive to show result as Element and Attribute.
We are creating our custom template to be used as part of HTML element or Attribute using "template" property of Angular directive by placing
some html .
1.Create Module and Controller
2.Create Custom Directive with name as myDirective
-----use template property to showcase custom html
----use restrict property to limit the directive use to Attribute and Element
---For Element set :restrict:'E'
---For Directive set:restrict:'A'
<div my-directive></div>
by placing custom directive name for using as Directive
for using directive as Element
<!DOCTYPE html>
<html ng-app="myapp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="">
<script src=""></script>
<body ng-controller="ctrl">
<div my-directive></div>

<script type="text/javascript">
var myapp=angular.module('myapp', []);

myapp.directive('myDirective', function(){
// Runs during compile
return {
// name: '',
// priority: 1,
// terminal: true,
// scope: {}, // {} = isolate, true = child, false/undefined = no change
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
template: '<div>swapnil</div>',
// templateUrl: '',
replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),


Comments or Responses

Login to post response