{"id":1311,"date":"2015-10-18T21:12:54","date_gmt":"2015-10-19T02:12:54","guid":{"rendered":"http:\/\/www.kuulstuff.com\/blog\/?p=1311"},"modified":"2015-12-18T21:14:21","modified_gmt":"2015-12-19T03:14:21","slug":"angularjs-directives","status":"publish","type":"post","link":"http:\/\/kuulstuff.com\/blog\/angularjs-directives\/","title":{"rendered":"AngularJS Directives"},"content":{"rendered":"<p>AngularJS directives are a cool way of defining behavior and using it any way you want. You can have a directive with your name and have it do any kind of work you want depending on the situation. AngularJS directives\u00a0control your DOM\u00a0behavior.<\/p>\n<p><strong>Directives<\/strong><\/p>\n<p>Directives guide the HTML compiler to control the elements so they can behave in a certain way. The rendering of HTML inside the AngularJS application is controlled by the directives. Depending on the type of directives, they can be used to change the behavior.\u00a0\u00a0Think about it like the word &#8216;change&#8217;. You can use it to refer to &#8216;change of clothes&#8217; or &#8216;spare change&#8217;. It depends on the context. Similarly, <a href=\"http:\/\/www.kuulstuff.com\/blog\/?p=1287\" target=\"_blank\">Directives <\/a>too can be used to behave differently if used in different contexts.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- techgad --><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1297284887870121\"\n     data-ad-slot=\"5877661191\"\n     data-ad-format=\"auto\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p><strong>Built-in Directives<\/strong><\/p>\n<p>Here are some key details about directives.<\/p>\n<p>AngularJS has some crucial inbuilt directives which can make your application behave in a certain way. Directives can be integrated with the HTML or can be used in the Javascript.<\/p>\n<p>One thing which is cool about directives is its naming. The naming of a directive follows camel case when used in Javascript: (ngApp). Whereas, if the directives are used in a HTML, the name is separated with a hyphen: (ng-app).<\/p>\n<p>There are four <strong>basic directives<\/strong>:<\/p>\n<ol>\n<li>ng-app :\u00a0To auto-bootstrap and\u00a0initialize an AngularJS application<\/li>\n<li>ng-model :\u00a0To bind between HTML\u00a0control and application data<\/li>\n<li>ng-init :\u00a0To initialize application data<\/li>\n<li>ng-view :\u00a0To switch between different views<\/li>\n<\/ol>\n<p>There are many <strong>builtin directives,<\/strong> here are my favorites:<\/p>\n<ol>\n<li>ng-controller :\u00a0To attach a controller class to the view<\/li>\n<li>ng-bind :\u00a0To replace the text of the element with value of an expression<\/li>\n<li>ng-repeat :\u00a0To\u00a0instantiate a template once per item from a collection<\/li>\n<li>ng-hide\u00a0:\u00a0To show or hide the given element based on given expression<\/li>\n<\/ol>\n<p>Directives are defined in a similar way as the <a href=\"http:\/\/www.kuulstuff.com\/blog\/?p=1303\" target=\"_blank\">Controllers <\/a>and services. They can be defined using app.directive method. The method takes a name of the directive and a function to define what happens in the directive.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- techgad --><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1297284887870121\"\n     data-ad-slot=\"5877661191\"\n     data-ad-format=\"auto\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p><strong>Types of\u00a0Directives<\/strong><\/p>\n<p>The four types of Directives are classified based on where they are applied. For example, let &#8216;<em>kuul-stuff<\/em>\u00a0&#8216; be the directive you wrote. Then,<\/p>\n<ol>\n<li>Attribute directives : The directive is used to change the attribute of an element \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<em>&lt;span kuul-stuff=&#8221;expression&#8221;&gt;&lt;\/span&gt;<\/em><\/li>\n<li>Element directives: The directive itself is used as an element \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<em>&lt;kuul-stuff&gt;&lt;\/kuul-stuff&gt;<\/em><\/li>\n<li>Class directives: The directive is used as a class \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<em>&lt;span class=&#8221;kuul-stuff: exp;&#8221;&gt;&lt;\/span&gt;<\/em><\/li>\n<li>Comment directives: The directive is used in the comments section \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<em>&lt;-directive: kuul-stuff exp -&gt;<\/em><\/li>\n<\/ol>\n<pre class=\"ng-scope\"><\/pre>\n<p><strong>Custom\u00a0Directives<\/strong><\/p>\n<p>Custom directives are a cool way of defining your own functionality or workflow. They enhance existing directives and are easy to integrate in the HTML. The custom directives are one of the super powers of AngularJS that makes it build powerful applications. Here are some details about custom directives.<\/p>\n<p>Custom directives are defined using app.directive method. The directive function returns an object in its callback.<\/p>\n<p><em>myapp.directive (&#8216;myDirective&#8217;, function(){<\/em><\/p>\n<p style=\"padding-left: 30px\"><em>&#8212;&#8211; \u00a0 \u00a0 write your functionality&#8212;-<\/em><\/p>\n<p><em>});<\/em><\/p>\n<p>There are some options which must be specified while writing a directive.<\/p>\n<ol>\n<li><strong>Restrict<\/strong>: Defines the type of directive&lt;br&gt;&#8217;A&#8217; = Attribute directive, &#8216;E&#8217; = Element directive, &#8216;C&#8217; = Class directive, and &#8216;M&#8217; = Comment directive. It is better to define Attribute or Element directive so you can determine what element a directive matches<\/li>\n<li><strong>Template<\/strong>: Defines directive output content<\/li>\n<li><strong>TemplateURL<\/strong>: Gives the path of the template to be shown<\/li>\n<li><strong>Controller<\/strong>: Defines a\u00a0controller in the directive which can be used to achieve a specific task.<\/li>\n<li><strong>Controller As<\/strong>: Defines an alias for the controller so you can refer to the controller&#8217;s variables using the alias<\/li>\n<li><strong>Scope<\/strong>: Defines the scope of the directive \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&#8216;<strong>false<\/strong>&#8216; = Default value, which means that the scope of the directive is\u00a0shared by the scope of the parent. There is no local scope present \u00a0 \u00a0&#8216;<strong>true<\/strong>&#8216; = It means that a new scope is created for the directive. There is local scope present as well as we can access the parent scope. \u00a0&#8216;<strong>{}<\/strong>&#8216;=Isolated scope means that there is no link between parent and directive scope. A new scope is created and cannot be accessed outside.\u00a0Further,\u00a0the directive cannot access the outside scope.\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0It is suggested to have an isolated scope in large AngularJS applications to keep the data safe. However, isolated scope can be accessed outside using some techniques. There is some magic which will be revealed later. Okay, fine. Here is the key. Use the following property to achieve the given purpose.\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&#8216;=&#8217; = Handles two-way binding. \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8216;@&#8217;=Passing string values to directives. \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&#8216;&amp;&#8217;=External function invocation.<\/li>\n<li><strong>Compile<\/strong>: Compile method is specified to achieve a function as soon as the page loads. It will return a link\u00a0function. If the behavior occurs only once in the directive, use compile.<\/li>\n<li><strong>Link<\/strong>: Link method is specified to achieve a function similar to compile but it loads after compile. If the behavior occurs multiple times in the directive, use Link.<\/li>\n<\/ol>\n<p>The order the AngularJS guides the HTML compiler is: \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Compile&#8211;&gt;Controller&#8211;&gt;Pre-link&#8211;&gt;Link&#8211;&gt;Post-link. \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 It depends on what you want to achieve in the directive.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- techgad --><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1297284887870121\"\n     data-ad-slot=\"5877661191\"\n     data-ad-format=\"auto\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p><strong>Directive Example<\/strong><\/p>\n<p>Here is an example of a custom directive.<\/p>\n<p><em>myapp.directive(&#8216;kuulStuff&#8217;, function(){<\/em><\/p>\n<p style=\"padding-left: 30px\"><em>return {<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>Restrict: A,<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>template: &lt;span&gt; Hey, I&#8217;m custom&lt;\/span&gt;,<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>templateUrl: &#8216;\/kuulstuff\/home.html&#8217;,<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>Scope: &#8216;true&#8217;,<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>Compile: function(telement,tattrs) {<\/em><\/p>\n<p style=\"padding-left: 120px\"><em>console.log(&#8220;Hi, I&#8217;m custom&#8221;);<\/em><\/p>\n<p style=\"padding-left: 120px\"><em>var linkfn=function($scope, element,attrs){<\/em><\/p>\n<p style=\"padding-left: 120px\"><em>element.css(&#8216;background-color, &#8216;red&#8217;);<\/em><\/p>\n<p style=\"padding-left: 120px\"><em>}<\/em><\/p>\n<p style=\"padding-left: 120px\"><em>return linkfn;<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>}),<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>controller: function(){<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>console.log(&#8220;In the controller&#8221;);<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>},<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>Link: function(scope, telement,tattrs){<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>console.log(&#8220;In the link&#8221;);<\/em><\/p>\n<p style=\"padding-left: 90px\"><em>},<\/em><\/p>\n<p style=\"padding-left: 30px\"><em>};<\/em><\/p>\n<p><em>});<\/em><\/p>\n<p>This is just &#8216;some&#8217; information\u00a0about directives in AngularJS. It may be a bit confusing in the beginning, but if you write more, you will be fine. Write your own directives and let me know how it goes. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS directives are a cool way of defining behavior and using it any way you want. You can have a directive with your name and have it do any kind of work you want depending on the situation. AngularJS directives control your DOM behavior.<a href=\"http:\/\/kuulstuff.com\/blog\/angularjs-directives\/\" class=\"more-link\">Read More <span class=\"screen-reader-text\">AngularJS Directives<\/span><\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21,61],"tags":[1086,1080,1041,1083,1085,1074,1057,1082,1046,1048,1032,1088,115,1087,1051,1079,1081,1084],"class_list":["post-1311","post","type-post","status-publish","format-standard","hentry","category-daytoday","category-technology","tag-compile","tag-directive","tag-angularjs","tag-basic-directives","tag-built-in-directives","tag-controllers","tag-css","tag-custom-directives","tag-directives","tag-filters","tag-html","tag-isolated-scope","tag-javascript","tag-link","tag-ng-app","tag-ng-controller","tag-ng-repeat","tag-types-of-directives"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4AvRz-l9","jetpack-related-posts":[{"id":1287,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-how-to-begin\/","url_meta":{"origin":1311,"position":0},"title":"AngularJS: How to Begin","author":"KP","date":"October 10, 2015","format":false,"excerpt":"AngularJS is the Javascript framework for website development. It is widely popular for the features including modularity and separation of concerns. Here are some of the keywords you must be familiar with in order to build web applications with AngularJS.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1303,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-controllers\/","url_meta":{"origin":1311,"position":1},"title":"AngularJS Controllers","author":"KP","date":"October 17, 2015","format":false,"excerpt":"AngularJS Controllers are where the most magic happens. Think that the controllers of an AngularJS application as the brain. The controllers are super smart and can define what happens on the (DOM) Document Object Model. AngularJS controllers along with the dependency injection form the super power of the AngularJS.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1281,"url":"http:\/\/kuulstuff.com\/blog\/forget-everything-just-learn-angularjs\/","url_meta":{"origin":1311,"position":2},"title":"Forget Everything: Just Learn AngularJS!","author":"KP","date":"October 10, 2015","format":false,"excerpt":"Angular or Angular JS is the next most powerful Javascript framework out there which is becoming increasingly popular among the tech world. Angular JS along with CSS frameworks such as Bootstrap coupled with the REST services is redefining Website development.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1316,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-routes-with-routeprovider-and-stateprovider\/","url_meta":{"origin":1311,"position":3},"title":"AngularJS Routes with $routeProvider and $stateProvider","author":"KP","date":"October 18, 2015","format":false,"excerpt":"AngularJS Routes are used to load different views or states depending on whether you use a ng-Route or ui-Route. The traditional way of linking the pages in your application is just fine, but with AngularJS routes you can handle dynamic binding better and the routes are easier to remember for\u2026","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":72,"url":"http:\/\/kuulstuff.com\/blog\/whats-with-kids-and-gifts-how-to-encourage-good-behavior\/","url_meta":{"origin":1311,"position":4},"title":"What&#8217;s with kids and gifts? How to encourage good behavior?","author":"KP","date":"May 19, 2010","format":false,"excerpt":"Kids become a little bit crazy during their special occasions. But, it is important for the parents to draw a limit. Here are some tips and best practices to avoid rude behavior and encouraging good behavior.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"Kid with a gift","src":"https:\/\/i0.wp.com\/www.kuulstuff.com\/blog\/wp-content\/uploads\/2010\/05\/kidwithgift.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1467,"url":"http:\/\/kuulstuff.com\/blog\/contact-forms-comparison\/","url_meta":{"origin":1311,"position":5},"title":"Contact Forms Comparison","author":"admin","date":"July 15, 2016","format":false,"excerpt":"Contact form is an integral part of any website. It provides a medium for the customer to connect directly with the users. Traditional html forms always work but Wufoo, Google Forms, WordPress Contact Form, and so on are the latest contact forms taking over the website world. They are equipped\u2026","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/comments?post=1311"}],"version-history":[{"count":2,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1311\/revisions"}],"predecessor-version":[{"id":1327,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1311\/revisions\/1327"}],"wp:attachment":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/media?parent=1311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/categories?post=1311"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/tags?post=1311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}