Categories: angularjs

AngularJS Custom-Directives restrict option guide

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.

This post is a part of AngularJS Directives Tutorial Series.

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

Please note that if your AngularJS application is using templateUrl to access HTML partials, you will need an HTTP server on front to serve them. This is due to the fact that Browser’s does not allow serving or requesting files on the file:// protocol.

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

Download Now!

References

Related posts:

  1. AngularJS Custom-Directives transclude, ngTransclude guide
  2. AngularJS Custom-Directives replace option guide
  3. AngularJS Custom-Directives controllers, require option guide
  4. AngularJS Custom-Directives scope guide
Leave a Comment
Share
Published by
websystiqueadmin @https://twitter.com/Websystique
9 years ago

Recent Posts

Spring Boot + AngularJS + Spring Data + JPA CRUD App Example

In this post we will be developing a full-blown CRUD application using Spring Boot, AngularJS, Spring Data, JPA/Hibernate and MySQL,…

8 years ago

Spring Boot Rest API Example

Spring Boot complements Spring REST support by providing default dependencies/converters out of the box. Writing RESTful services in Spring Boot…

8 years ago

Spring Boot WAR deployment example

Being able to start the application as standalone jar is great, but sometimes it might not be possible to run…

8 years ago

Spring Boot Introduction + hello world example

Spring framework has taken the software development industry by storm. Dependency Injection, rock solid MVC framework, Transaction management, messaging support,…

8 years ago

Secure Spring REST API using OAuth2

Let's secure our Spring REST API using OAuth2 this time, a simple guide showing what is required to secure a…

8 years ago

AngularJS+Spring Security using Basic Authentication

This post shows how an AngularJS application can consume a REST API which is secured with Basic authentication using Spring…

8 years ago