Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted January 24th, 2016
Custom AngularJS directives

A big part of AngularJS are it’s directives, which allow you to extend the HTML, add additional functionality and even to generate new DOM elements. The framework comes with plenty of built-in directives, you can also add custom ones that will allow you to create reusable functionality for your application. A directive can be used in the 4 following ways:

As an attribute:

<div custom-directive></div>

As an element:

<custom -directive></custom>

As a class:

<div class="custom-directive: expression;"></div>

As a comment

<!-- directive: custom-directive expression -->

In this post I will show you how to create your first small directive and add it as an attribute in your HTML. For this example I decided to create a styled file upload field and use it in a form.

Creating the JS file

As a start we need to create a JavaScript file for our directive. I’ve given my file the name fileupload-directive.js and saved it in a folder called directives. Now we have to add the code for our firs directive:

(function () {
    'use strict';

    angular
      .module('my-app')
        .directive('fileUpload', function () {
          return {
            templateUrl: 'templates/directives/fileupload-directive.html',
            link: function (scope, element) {
                element.addClass('upload-field');
                element.bind("change", function (changeEvent) {
                    scope.$apply(function () {
                        console.log(changeEvent.target.files[0]);
                        scope.filePath = changeEvent.target.files[0];
                    });
                });
            }
          }
        })
})();

With this code I add a directive with the name fileUpload inside the module my_app. Then inside it I set the templateUrl to point to a file that will have the HTML structure for our custom upload field. In addition to that in the directive I’ve added a function that gives the element a class upload-field’, which will have most of the necessary styling for our element.

The HTML for our reusable directive

Now it’s time to create the HTML for our file upload directive. We will do that in the file called fileupload-directive.html. Here is what our code will look like:

<button class="upload-icon"></button>
{{filePath.name}}
<input type="file" class="file-input-field" multiple ng-model="path"/>

This will create a button which will also be able to be used in order to upload a file. The input will be styled in order to look nicer and not just like the standard file input field.

Adding the styling

.upload-field {
    position: relative;
    background-color: #dadada;
    height: 50px;
    width: 400px;
    font-size: 13px;
    line-height: 50px;
    color: black;
    margin: 40px;
}

.upload-icon {
    float: left;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    background-image: url('images/upload-icon.png');
}

.file-input-field {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

With those classes we make the actual file input invisible and style the div around it to look like an import field. We also style the button to have a background image of a folder.

Making use of our directive

Now as a last step we can make use of our directive inside the HTML. We can do that in the following way:

<div file-upload></div>

By doing that all of the code inside the fileupload-directive.html will go inside this div element and will be given the proper styling.

By completing all those steps you now have your first reusable AngularJS directive.

Posted by Victoria Mineva

Leave a Reply

Your email address will not be published. Required fields are marked *