Inheritance of directives to Angular Light and other "buns"

Recently, after reading one article by Armin Ronacher, I thought it would be nice to be able to inherit directives and
soon realized this in his library Angular Light (aLight).

In general, all inheritance is reduced to splitting directives into methods that can be redefined later.
Here is an example of al-show-slow based on al-show , where the slow appearance and hiding of an element takes place, looks like this:

alight.directives.al.showSlow = function(element, name, scope, env) { var dir = alight.directives.al.show(element, name, scope, env); //    dir.showDom = function() { //  "show" $(element).fadeIn(1000); } dir.hideDom = function() { //  "hide" $(element).fadeOut(1000); } return dir; } 

Example of al-show inheritance
Another example is an al-value-delay based on al-value , where data enters the model with a delay (without repetitions).

Also, multiple inheritance is possible here, but so far there is no need for it.

')
Further some more useful methods:

1) Binding to the “detached” DOM, i.e. one that is not in document:

 tpl = $('<div al-init="i=0" al-click="i+=1">{{i}}</div>') //   DOM alight.applyBindings(null, tpl[0]) //   $('body').append(tpl) //     body 

2) The possibility of renaming directives, I don’t know how in Angular.js, but in aLight it’s just:

 alight.directives.al.myKeypress = alight.directives.al.keypress 

3) In Angular.js, I sometimes had a question how to call my code immediately after $ digest / $ apply even if $ digest is now in the process of processing. In aLight, instead of $ digest, there is a $ scan function, and you can call your code after processing it like this:

 scope.$scan(function(){ // do something }) 

4) Static binding in the DOM, in aLight there are 2 ways of binding the values ​​in the DOM:

  <a href="{{first}}">{{first}}</a> <a href="{{=second}}">{{=second}}</a> 

The difference is that in the 2nd case there is no tracking of changes in the variable, it is convenient as a normal, one-time rendering.

5) Prefixes with directives. Each directive is in its "section": al-if, bo-if, ui-if, etc. These sections allow you to monitor the presence of directives (as in knockout.js), for example, if I write:

 <div al-ifn="visible"></div> 

then aLight will give an error that there is no such directive.

I also took into account the comments of habr users, translated the aLight API from underscore to camelcase , and added some directives such as: al-keydown, al-mousedown, al-mousemove. Full list of standard directives can be found here.

Another couple of moments from today's directives:

For al-keydown, al-mousemove, etc., $ event is available directly in the expression, I thought that this could be convenient:

 <input type="text" al-keydown="key = $event.keyCode" /> 

The al-focused directive makes two-way binding — setting the variable to focused = true, the focus is set on the element, and when the focus appears on the element, the variable is set to true, when the focus is gone the same way.

 <input type="text" al-focused="focused" /> 

An example here , it is convenient to set the focus when loading the page or at any other time, but if something does not work, then you can inherit and change.

Basically - everything. Comments and suggestions are welcome.