angular.js: directives

Basic structure:

myModule.directive('directiveName', function(){
    return {
        restrict: 'AE',
        replace: true,
        template: '<div class="{{class}}">some html, this could also be a reference to an external template. In which case, you can use templateUrl</div>', link: function(scope, elem, attrs){ // elem is the HTML element the directive was applied to, and attrs are the attributes of the same } } })

The possible restrict values:

A: This restricts the directive to be attached using an attribute
E: This allows the directive to be used as a custom element
C: This allows the directive to be used by adding it as a class to the element
M: Allows the directive to be executed via an HTML comment

Other options:

replace: true substitutes the DOM element for the template (instead of just filling out their inner HTML)

Leave a comment

Cancel reply