AngularJS Directive’s restrict key defines how a directive can be used in HTML. In this post, we will see all possible configuration options using restrict.
In previous post, our directive was created to be used as an attribute of an existing element, like <div item-widget> which is the default behavior. But We can choose the way our directive should be used in HTML, using restrict key of Directive Definition Object. The possible values for restrict (and so the ways in which we can use our directive) are:
- A : Specifies that Directive will be used as an attribute, like <div item-widget></div>, as was done in last example. This is also the default behavior if restrict is not declared. Preferred if just modifying the behavior of existing elements.
- E : Specifies that Directive will be used as an Element. Like <item-widget></item-widget>. Preferred if creating new content.
- C : Specifies that Directive can be used as class name in existing HTML elements. Like <div class=”item-widget”></div>
- M : Specifies that Directive can be used as HTML comments. Like <!– Using directive: item-widget–>
These keys can be combined. Best practices suggest to use only A & E types.
Now if in above example, we were to use item-widget as an Element, we would just declare restrict key with following values:
.directive('itemWidget', [function() {
return{
templateUrl:'saleItem.html',
restrict:'E'
}
}]);
Do note that once you declare restrict key, you are fixing it. That means if you will try to use item-widget as attribute, AngularJS will throw an error. If we want to allow item-widget to use both as Element & Attribute, we can do so using following configuration:
.directive('itemWidget', [function() {
return{
templateUrl:'saleItem.html',
restrict:'EA'
}
}]);
Thanks to above configuration, now our directive can be used both as <item-widget></item-widget> & <div item-widget></div >. No additional changes.
Live Example:
Complete Code:
<html>
<head>
<title>Directive Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="jumbotron container" ng-app="myApp">
<div ng-controller="AppController as ctrl">
<h3>List of Sale Items</h3>
<div ng-repeat="item in ctrl.items">
<item-widget></item-widget>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
</script>
<script>
angular.module('myApp', [])
.controller('AppController', [function() {
var self = this;
self.items = [
{name: 'Computer', price: 500, condition:'New',brand : 'Lenovo', published:'01/11/2015'},
{name: 'Phone', price: 200, condition:'New',brand : 'Samsung', published:'02/11/2015'},
{name: 'Printer', price: 300, condition:'New',brand : 'Brother', published:'06/11/2015'},
{name: 'Dishwasher', price: 250, condition:'Second-Hand',brand : 'WhirlPool', published:'01/12/2015'},
];
}])
.directive('itemWidget', [function() {
return{
templateUrl:'saleItem.html',
restrict: 'EA'
}
}]);
</script>
</body>
</html>
Shown below is the directive’s content[saleItem.html].
<div class="panel panel-default"> <div class="panel-heading"> Published at:<span ng-bind="item.published | date"></span> </div> <div class="panel-body"> Name:<span ng-bind="item.name"></span> Condition:<span ng-bind="item.condition"></span> Price:<span ng-bind="item.price | currency"></span> Brand:<span ng-bind="item.brand"></span> </div> </div>
That’s it for restrict option. Let’s move to next configuration option [scope] of Directive Definition Object, which helps us make reusable directives.
Next Topic : AngularJS Directive’s scope option
You can use popular Apache HTTP server to serve files. If you need assistance setting-up server,
this post can help you.
Download Source Code
References
If you like tutorials on this site, why not take a step further and connect me on Facebook , Google Plus & Twitter as well? I would love to hear your thoughts on these articles, it will help improve further our learning process.