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¶
alight.directives.al.valueDelay = function(scope, cd, element, value, env) {
// create a source directive
var dir = alight.directives.al.value(scope, 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
oldUpdate();
}, 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