Learn how the “restrict” property determines how your Angular.js directive can be invoked
In the second part of this series: Getting Started with Angular.js Custom Directives – Part II – The “replace” property, we learned about how to use the “replace” property when creating a custom Angular.js directive. This determines whether the element that your directive renders will be a child of the element that invoked it, or a complete replacement of that element.
In this article, we will learn about the “restrict” property that, which allows you to specify the ways in which your custom directive can be invoked.
Example # 1:
var myMod = angular.module('widgetApp', );
template: '<div>This is a Widget</div>',
In Example # 1, we have created a custom Angular.js directive named: “uiWidget”. In addition to the “template” and “replace” properties that were discussed in previous articles, we have created a “restrict” property. This property allows you to specify the way in which the directive is invoked. Notice that the value is: “AECM”. These letters stand for:
- A : Attribute
- E : Element
- C : Class
- M : Comment
You can use any one of the values by itself, or any combination.
Example # 2:
<div ui-widget><h1>The Original Content (1)</h1></div>
<ui-widget><h1>The Original Content (2)</h1></ui-widget>
<div class="ui-widget"><h1>The Original Content (3)</h1></div>
<!-- directive: ui-widget -->
In Example # 2, we have four snippets of HTML. In each case, we demonstrate a different way to invoke our custom Angular.js directive.
First, as an attribute of the HTML element. Notice how the attribute has no value. In our case, the mere presence of the attribute signals to Angular that our custom directive should be invoked.
Second, as an element. Although there is no such thing as a “ui-widget” HTML tag, Angular will recognize this element and invoke our custom directive.
Third, as a CSS class of the element.
Fourth, as a comment. This approach may seem a bit odd, but you can, in fact, trigger your custom Angular.js directive via an HTML comment.
HERE IS THE LINK TO THE WORKING EXAMPLE FOR THIS ARTICLE: http://examples.kevinchisholm.com/angular/directives/basics/html/part-iii.html
In this article, we learned about the “restrict” property of the object returned by an Angular directive. We discussed the four possible values for this property, and how each case differs.