Angular JS

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Creating Custom AngularJS Directives Series</h2>
<ol style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px; margin-top: 0px;">
<li style="box-sizing: border-box;"><a href="http://weblogs.asp.net/dwahlin/archive/2014/04/29/creating-custom-angularjs-directives-part-i-the-fundamentals.aspx" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">The Fundamentals</a></li>
<li style="box-sizing: border-box;"><a href="https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Creating Custom AngularJS Directives Part 2 – Isolate Scope">Isolate Scope</a></li>
<li style="box-sizing: border-box;"><a href="http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Isolate Scope and Function Parameters">Isolate Scope and Function Parameters</a></li>
<li style="box-sizing: border-box;"><a href="https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-4-transclusion-and-restriction" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Transclusion and Restriction">Transclusion and Restriction</a></li>
<li style="box-sizing: border-box;">The link() Function (coming soon)</li>
<li style="box-sizing: border-box;"><a href="http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-6-using-controllers" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Using Controllers in Directives">Using Controllers</a></li>
<li style="box-sizing: border-box;"><a href="https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-7-%E2%80%93-creating-a-unique-value-directive-using-asyncvalidators" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Creating a Unique Value Directive using $asyncValidators">Creating a Unique Value Directive using $asyncValidators</a></li>
</ol>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<a href="http://www.angularjs.org/" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">AngularJS</a> provides many directives that can be used to manipulate the DOM, route events to event handler functions, perform data binding, associate controllers/scope with a view, plus much more. Directives such as <strong style="box-sizing: border-box;">ng-click</strong>, <strong style="box-sizing: border-box;">ng-show/ng-hide</strong>, <strong style="box-sizing: border-box;">ng-repeat</strong>,and many <a href="https://docs.angularjs.org/api/ng/directive" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">others</a> found in the AngularJS core script make it easy to get started using the framework.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Although the built-in directives cover many different scenarios, there may be times when you find yourself needing custom directives and wondering how to get started writing them. In this series of posts I’ll provide a step-by-step look at how directives work and how you can get started using them. The overall goal is to move slowly and provide simple, digestible directive examples that get more and more involved as the series progresses.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
I assume that you already know what directives are and how they’re used. If you’re new to directives check out   <a href="http://weblogs.asp.net/dwahlin/archive/2013/08/15/angularjs-in-60-ish-minutes-the-ebook.aspx" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">AngularJS in 60ish Minutes video on YouTube (or get the eBook version)</a> or   new <a href="http://weblogs.asp.net/dwahlin/archive/2014/03/24/the-angularjs-jumpstart-video-training-course-has-been-released.aspx" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">AngularJS JumpStart</a>course.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Writing Custom Directives is Easy Right?</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
AngularJS directives can be a bit intimidating the first time you see them. They offer many different options, have a few cryptic features (and cryptic is   politically correct term for “what were they thinking here?”), and are generally challenging at first. However, once you understand the pieces and how they fit together you’ll find that they’re not that bad. I compare it to learning to play an instrument. The first time you play a piano or guitar you aren’t very good and feel completely incompetent. However, after putting in the necessary practice time you end up getting pretty good and capable of handling more advanced music. It’s the same with directives – they take a little practice but you can do powerful things with them once you get the hang of it. I do look forward to the day where features found in the <a href="http://www.polymer-project.org/" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">Polymer</a> project and <a href="http://w3c.github.io/webcomponents/explainer/" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">Web Components</a> spec replace the directives that we write today. Check out those links if you want a glimpse into the future direction of directives.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Getting Started with Custom Directives</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Why would you want to write a custom directive? Let’s say that you’ve been tasked with converting a collection of customers into some type of grid that’s displayed in a view. Although you can certainly add DOM functionality into a controller to handle this, doing that would make it hard to test the controller and breaks the separation of concerns – you just don’t want to do that in an AngularJS application. Instead, that type of functionality should go into a custom directive. In another case you may have some data binding that occurs across many views and you want to re-use the data binding expressions. While a child view loaded with ng-include (more on this in a moment) could be used, directives also work well in this scenario. There are numerous other ways that custom directives can be used, these examples are only scratching the surface.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Let’s start by looking an a very basic example of an AngularJS directive. Assume that we have the following module and controller defined in the application (I’ll refer to this module and controller in future posts as well):</div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;"><span class="kwrd" style="box-sizing: border-box; color: blue;">var</span> app = angular.module(<span class="str" style="box-sizing: border-box; color: #006080;">'directivesModule'</span>, []);

app.controller(<span class="str" style="box-sizing: border-box; color: #006080;">'CustomersController'</span>, [<span class="str" style="box-sizing: border-box; color: #006080;">'$scope'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> ($scope) {
    <span class="kwrd" style="box-sizing: border-box; color: blue;">var</span> counter = 0;
    $scope.customer = {
        name: <span class="str" style="box-sizing: border-box; color: #006080;">'David'</span>,
        street: <span class="str" style="box-sizing: border-box; color: #006080;">'1234 Anywhere St.'</span>
    };
    
    $scope.customers = [
        {
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'David'</span>,
            street: <span class="str" style="box-sizing: border-box; color: #006080;">'1234 Anywhere St.'</span>
        },
        {
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'Tina'</span>,
            street: <span class="str" style="box-sizing: border-box; color: #006080;">'1800 Crest St.'</span>
        },
        {
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'Michelle'</span>,
            street: <span class="str" style="box-sizing: border-box; color: #006080;">'890 Main St.'</span>
        }
    ];

$scope.addCustomer = <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
        counter++;
        $scope.customers.push({
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'New Customer'</span> + counter,
            street: counter + <span class="str" style="box-sizing: border-box; color: #006080;">' Cedar Point St.'</span>
        });
    };

$scope.changeData = <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
        counter++;
        $scope.customer = {
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'James'</span>,
            street: counter + <span class="str" style="box-sizing: border-box; color: #006080;">' Cedar Point St.'</span>
        };
    };
}]);</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br style="box-sizing: border-box;" />Let’s say that we find ourselves writing out a data binding expression similar to the following over and over in views throughout the app:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">Name: {{customer.name}} 
<br />
Street: {{customer.street}}</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
One technique that can be used to promote re-use is to place the data binding template into a child view (I’ll call it <strong style="box-sizing: border-box;">myChildView.html</strong>) and reference it from within a parent view using the <strong style="box-sizing: border-box;">ng-include</strong> directive. This allows<strong style="box-sizing: border-box;">myChildView.html</strong> to be re-used throughout the application wherever it’s needed.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;"><div ng-include=<span class="str" style="box-sizing: border-box; color: #006080;">"'myChildView.html'"</span>></div></pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
While this gets the job done, another technique that can be used is to place the data binding expression into a custom directive. To create a directive you first locate the target module that the directive should be placed in and then call it’s <strong style="box-sizing: border-box;">directive()</strong> function. The <strong style="box-sizing: border-box;">directive()</strong> function takes the name of the directive as well as a function. Here’s an example of a simple directive that embeds the data binding expression:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">angular.module(<span class="str" style="box-sizing: border-box; color: #006080;">'directivesModule'</span>).directive(<span class="str" style="box-sizing: border-box; color: #006080;">'mySharedScope'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
    <span class="kwrd" style="box-sizing: border-box; color: blue;">return</span> {
        template: <span class="str" style="box-sizing: border-box; color: #006080;">'Name: {{customer.name}}<br /> Street: {{customer.street}}'</span>
    };
});</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Does this buy us much over using a child view along with the <strong style="box-sizing: border-box;">ng-include</strong> directive? Not at this point. However, directives can do a lot more with just a little code, plus they make it a piece of cake to attach the functionality they offer to an element. An example of attaching the <strong style="box-sizing: border-box;">mySharedScope </strong>directive to a <strong style="box-sizing: border-box;"><div></strong> element is shown next:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;"><span class="kwrd" style="box-sizing: border-box; color: blue;"><</span><span class="html" style="box-sizing: border-box; color: maroon;">div</span> <span class="attr" style="box-sizing: border-box; color: red;">my-shared-scope</span><span class="kwrd" style="box-sizing: border-box; color: blue;">></</span><span class="html" style="box-sizing: border-box; color: maroon;">div</span><span class="kwrd" style="box-sizing: border-box; color: blue;">></span></pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br style="box-sizing: border-box;" />When the directive is run it’ll output the following based on the data in the controller shown earlier:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<strong style="box-sizing: border-box;">Name: David  <br style="box-sizing: border-box;" />Street: 1234 Anywhere St.</strong></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />The first thing you’ll probably notice is that the <strong style="box-sizing: border-box;">mySharedScope</strong> directive is referenced in the view by using <strong style="box-sizing: border-box;">my-shared-scope</strong>. Why is that? The answer is that directive names are defined use a camel-case syntax. For example, when you use the <strong style="box-sizing: border-box;">ngRepeat</strong> directive you use the hyphenated version of the name: <strong style="box-sizing: border-box;">ng-repeat</strong>.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Another interesting thing about this directive is that it inherits the scope from the view by default. If the controller shown earlier (CustomersController) is bound to the view then the <strong style="box-sizing: border-box;">$scope’s</strong> <strong style="box-sizing: border-box;">customer</strong> property is accessible to the directive. This is referred to as <strong style="box-sizing: border-box;">shared scope</strong> and works great in situations where you know a lot about the parent scope. In situations where you want to re-use a directive you can’t rely on knowing the properties of the scope though and will likely use something referred to as <strong style="box-sizing: border-box;">isolate scope</strong>. I’ll provide more details on isolate scope in the next post.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Directive Properties</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
In the previous <strong style="box-sizing: border-box;">mySharedScope</strong> directive a single property named <strong style="box-sizing: border-box;">template</strong> was defined in the object literal returned from the function. This property is responsible for defining the template code (a data binding expression in this case) that should be used to generate HTML. What other properties are available to use?</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Custom directives will typically return an object literal that is responsible for defining properties needed by the directive such as templates, a controller (if one is used), DOM manipulation code, and more. Several different properties can be used (you’ll find a <a href="http://docs.angularjs.org/api/ng/service/$compile" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">complete list of them here</a>). Here’s a look at a few of the key properties that you may come across and an example of using them:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">angular.module(<span class="str" style="box-sizing: border-box; color: #006080;">'moduleName'</span>)
    .directive(<span class="str" style="box-sizing: border-box; color: #006080;">'myDirective'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
    <span class="kwrd" style="box-sizing: border-box; color: blue;">return</span> {
        restrict: <span class="str" style="box-sizing: border-box; color: #006080;">'EA'</span>, <span class="rem" style="box-sizing: border-box; color: green;">//E = element, A = attribute, C = class, M = comment         </span>
        scope: {
            <span class="rem" style="box-sizing: border-box; color: green;">//@ reads the attribute value, = provides two-way binding, & works with functions</span>
            title: <span class="str" style="box-sizing: border-box; color: #006080;">'@'</span>         },
        template: <span class="str" style="box-sizing: border-box; color: #006080;">'<div>{{ myVal }}</div>'</span>,
        templateUrl: <span class="str" style="box-sizing: border-box; color: #006080;">'mytemplate.html'</span>,
        controller: controllerFunction, <span class="rem" style="box-sizing: border-box; color: green;">//Embed a custom controller in the directive</span>
        link: <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> ($scope, element, attrs) { } <span class="rem" style="box-sizing: border-box; color: green;">//DOM manipulation</span>
    }
});</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
A short explanation of each of the properties is shown next:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
</div>
<table border="1" cellpadding="2" cellspacing="0" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; max-width: 100%; width: 500px;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128"><strong style="box-sizing: border-box;">Property</strong></td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372"><strong style="box-sizing: border-box;">Description</strong></td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">restrict</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Determines where a directive can be used (as an element, attribute, CSS class, or comment).</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">scope</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Used to create a new child scope or an isolate scope.</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">template</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Defines the content that should be output from the directive. Can include HTML, data binding expressions, and even other directives.</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">templateUrl</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Provides the path to the template that should be used by the directive. It can optionally contain a DOM element id when templates are defined in <script> tags.</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">controller</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Used to define the controller that will be associated with the directive template.</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">link</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Function used for DOM manipulation tasks.</td></tr>
</tbody></table>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Manipulating the DOM</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
In addition to performing data binding operations with templates (and there’s much more to that story that I’ll cover in future posts!), directives can also be used to manipulate the DOM. This is done using the link function shown earlier.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
The link function normally accepts 3 parameters (although others can be passed in some situations) including the scope, the element that the directive is associated with, and the attributes of the target element. An example of a directive that handles click, mouseenter, and mouseleave events on an element is shown next:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">app.directive(<span class="str" style="box-sizing: border-box; color: #006080;">'myDomDirective'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
    <span class="kwrd" style="box-sizing: border-box; color: blue;">return</span> {
        link: <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> ($scope, element, attrs) {
            element.bind(<span class="str" style="box-sizing: border-box; color: #006080;">'click'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
                element.html(<span class="str" style="box-sizing: border-box; color: #006080;">'You clicked me!'</span>);
            });
            element.bind(<span class="str" style="box-sizing: border-box; color: #006080;">'mouseenter'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
                element.css(<span class="str" style="box-sizing: border-box; color: #006080;">'background-color'</span>, <span class="str" style="box-sizing: border-box; color: #006080;">'yellow'</span>);
            });
            element.bind(<span class="str" style="box-sizing: border-box; color: #006080;">'mouseleave'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
                element.css(<span class="str" style="box-sizing: border-box; color: #006080;">'background-color'</span>, <span class="str" style="box-sizing: border-box; color: #006080;">'white'</span>);
            });
        }
    };
});</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
To use the directive you can add the following code into the view:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;"><span class="kwrd" style="box-sizing: border-box; color: blue;"><</span><span class="html" style="box-sizing: border-box; color: maroon;">div</span> <span class="attr" style="box-sizing: border-box; color: red;">my-dom-directive</span><span class="kwrd" style="box-sizing: border-box; color: blue;">></span>Click Me!<span class="kwrd" style="box-sizing: border-box; color: blue;"></</span><span class="html" style="box-sizing: border-box; color: maroon;">div</span><span class="kwrd" style="box-sizing: border-box; color: blue;">></span></pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br style="box-sizing: border-box;" />As the mouse enters or leaves the <div> the background color will change between yellow and white (yes, embedded styles are used in this simple example but CSS classes can certainly be used as well). When the target element is clicked the inner HTML is changed to “You clicked me!”. There’s of course much, much more you can do when it comes to DOM manipulating but this should help get you started.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Structuring AngularJS Directive Code</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Although the <strong style="box-sizing: border-box;">mySharedScope</strong> and <strong style="box-sizing: border-box;">myDomDirective</strong> directives work fine, I like to follow a specific pattern when defining directives and other AngularJS components. Here’s an example:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">(<span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {

<span class="kwrd" style="box-sizing: border-box; color: blue;">var</span> directive = <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
        <span class="kwrd" style="box-sizing: border-box; color: blue;">return</span> {

};
    };

angular.module(<span class="str" style="box-sizing: border-box; color: #006080;">'moduleName'</span>)
        .directive(<span class="str" style="box-sizing: border-box; color: #006080;">'directiveName'</span>, directive);

}());</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
This code wraps everything with an immediately invoked function to pull everything out of the global scope. It then defines the directive functionality in a function assigned to the <strong style="box-sizing: border-box;">directive</strong> variable. Finally, a call is made to the module’s <strong style="box-sizing: border-box;">directive()</strong> function and the <strong style="box-sizing: border-box;">directive</strong> variable is passed in. There are several other techniques that can be used to structure code (see   <a href="http://weblogs.asp.net/dwahlin/archive/2013/12/01/structuring-angularjs-code.aspx" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">previous post</a> on the subject) but this is the general pattern I like to follow.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Summary</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
In this first post on AngularJS directives you’ve seen some of the fundamentals and learned how to create two basic directives. We’ve barely scratched the surface though! In the next post I’ll discuss isolate scope and different properties referred to as <strong style="box-sizing: border-box;">local scope properties</strong> that can be used for data binding and much more.</div>
<br /></div>

Creating Custom AngularJS Directives Series

Creating Custom AngularJS Directives Series The Fundamentals Isolate Scope Isolate Scope and Function Parameters Transclusion and Res...

+ Read more »