Angular 1.2.4 – Sample Directive

/**
 * Sample Directive
 */

define(['sampleLink', 'sampleCtrl'], function (link, controller) {
function sampleDir () {
    return {
        /**
         * require is used by the link option
         * can be a single controller, or an array. '^myController', or ['^controller2', '^controller1']
         * controllers to be used in the link section. link (scope, element, attrs, requires)
         *
         * '^myController' - use ^ to search up the parents for the controller, otherwise it only looks at it's own element and will throw an error
         * */
        require : '',

        /* restrict what type of elements this directive is rendered on E=element <directive> or A=attribute <element data-directive> */
        restrict : 'EA',

        /* *
         * transclude in or outer scope. true = use the outer scope that this directive belongs to. false = create a scope inside the directive
         *      only use true when you want to create a directive that wraps arbitrary content
         *      when you use false and create a scope, you will want to pass in scope, or data through attributes on the element
         * */
        transclude : false,

        /* *
         * scope = create an isolate scope for the directive pass data into the directive through attributes
         *      This allows us to isolate the scope and reuse these directives throughout an app.
         *      =attr means to bind data to that attribute
         *      &attr means with transclude turned on this attribute will trigger evaluation of an expression in the context of the original scope
         *          any expression is allowed, including a function, this is ideal for binding callback functions to directive behaviors
         *          use this when we want the directive to expose an API for binding behaviors
         * */
        scope : {
            inputObject : '=inputObject',
            /*'close' : '&onClose'*/
        },

        /* templateUrl = Point to the template this directive should render */
        templateUrl : '/a/tpl/modules/util/input/inputs.html',

        /**
         * link : use link when you want to manipulate the dom with the directive
         * takes a function, inline or it can be dependency injected through requireJS
         * use the following signature function lin k(scope, element, attrs) { ... }
         *
         * scope is an angular scope object
         * element is the jqLite wrapped element that this directive matches
         * attrs is a hash object with key-value pairs of normalized attribute names and their values
         * */
        link : link,

        /**
         * Specify a controller, and use controllerAs to alias the scope, if you want to reference the scope or it's functions in the template.
         * You must define scope in the directive for this to be used.
         *
         * Q: What's the difference between controller and link? - A: Controllers can expose an API, and link can interact with controllers using require
         *
         * Best Practice: Only use controller when you want to expose the directive controller to another directive. Otherwise use Link
         *
         * This is great for building complicated directives that are made up of other directives and need to communicate with one another.
         * */
        controller : controller
        /*controllerAs : 'input'*/

    }
}

return sampleDir;
});

/**
 * Sample Link - an example of an external link function to be used with a directive
*/

define([], function () {
 /**
 * an example of an external link function to be used with a directive
 */
 function inputLink (scope, element, attrs) {
 scope.input = scope.inputObject;

 scope.typeUrl = '/a/tpl/modules/util/input/' + scope.input.type + '.html';
 }

 return inputLink;
});

 

admin