Inheritance of directives

If you want make inheritance of a directive, you need call a parent directive after that you can replace methods of the directive. For example, al-value has a few methods:

  • onDom - binding to DOM
  • updateModel - updateing the model
  • watchModel - $watch model
  • updateDom - updateting DOM
  • initDom - set first value to DOM, updateDom(init_value)
  • start - It’s called when the directive is ready

Make a directive al-value with deferred updating of model:

Inherit al-value = function(scope, cd, element, value, env) {
     // create a source directive
     var dir =, cd, element, value, env);

     // save the old method for update the model
     var oldUpdate = dir.updateModel;
     var timer = null;

     // change the method
     dir.updateModel = function() {
         if(timer) clearTimeout(timer);
         timer = setTimeout(function() {
             timer = null;

             // call the default method for update the model
         }, 500);
     return dir;

Examples of inheritance

Examples below for v0.10, but in v0.11 it works similar * al-value -> al-value-delay * al-show -> al-show-slow * al-repeat, add “$even”, “$odd” into the directive * al-repeat, change input expression my-repeat=”list.foreach item” * al-repeat, change rendering

comments powered by Disqus