Angular Directives Part 1 - Very basic Angular Directives Raw

If you are learning Angular directives, these samples should help you out. They're small and simple and illustrate some of the basic concepts. Take a look at the comments where each directive is defined.

HTML:

    my-sample: <span my-sample></span>
    my-sample2: <my-sample2></my-sample2>
    my-sample3: <my-sample3></my-sample3>
    my-sample4: <span class="my-sample4"></span>

    my-sample5: <span my-sample5 samp5-attr="samp5ScopeVar1" samp5-func-attr="getDate()"
      samp5-attr-a="5 6" samp5-attr-b="{{5 6}}"></span>

    <p></p>
    <p>Enter date: <input type="text" date-keys /></p>

sample5.html:

<input type='text' ng-model='samp5ScopeVar' />
{{samp5ScopeVar}} @ {{now()}}.  {{samp5AttrA}}/{{samp5AttrB}}<br />

JavaScript:

// Input field and text to show it
// <span my-sample></span>
angular.module('app').directive('mySample', ['$compile', function ($compile) {
    return {
        restrict: 'A', // <-- default, doesn't need to be specified.
        link: function (scope, element, attrs, controller) {
            var markup = "<input type='text' ng-model='sampleData' /> {{sampleData}}<br/>";
            angular.element(element).html($compile(markup)(scope));
        }
    };
}]);

// Version that restricts it to be an element.
// <my-sample2 />
angular.module('app').directive('mySample2', ['$compile', function ($compile) {
    return {
        restrict: 'E', // <-- indicates it has to be an element
        link: function (scope, element, attrs, controller) {
            var markup = "<input type='text' ng-model='sampleData2' /> {{sampleData2}}<br/>";
            angular.element(element).html($compile(markup)(scope));
        }
    };
}]);

// Same as mySample2, but using template syntax.
// <my-sample3 />
angular.module('app').directive('mySample3', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        template: "<input type='text' ng-model='sampleData3' /> {{sampleData3}}<br/>"
    };
}]);

// Same as mySample3, but using 'C' for class instead.
// <span class="my-sample4"></span>
angular.module('app').directive('mySample4', ['$compile', function ($compile) {
    return {
        restrict: 'C',  // <-- indicates it has to be an class
        template: "<input type='text' ng-model='sampleData4' /> {{sampleData4}}<br/>"
    };
}]);

// using templateUrl and isolate scope
// <span my-sample5 samp5-attr="samp5ScopeVar1"></span>
angular.module('app').directive('mySample5', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        templateUrl: "sample5.html",
        scope: {
            samp5ScopeVar: "=samp5Attr", // if samp5ScopeVar matches samp5Attr, then you just need "="
            now: "&samp5FuncAttr", // If samp5FuncAttr was called now, we could just say "&"
            samp5AttrA: "@", // @ = string
            samp5AttrB: "@", // @ = string
        } // isolate scope, not inherited.
    };
}]);

// Shows how to reject certain keystrokes
// <p>Enter date: <input type="text" date-keys /></p>
angular.module('app').directive('dateKeys', ['$compile', function ($compile) {
    return {
        restrict: 'A', // <-- default, doesn't need to be specified.
        link: function (scope, element, attrs, controller) {
            element.on('keydown', function(event) {
                if ((event.keyCode >= 48 && event.keyCode <= 57) || // numbers
                    (event.keyCode === 191) || // forward slash
                    (event.keyCode === 8) // backslash
                    ) {
                    return true;
                }
                return false;
            });
        }
    };
}]);