aLight - sample of inheritance

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app al-init="visible=true">
    <input type="checkbox" al-checked="visible" /> <br/>
    al-show: <span style="background-color: red" al-show="visible">Hello</span> <br/>
    al-show-slow: <span style="background-color: red" al-show-slow="visible">Slow Hello</span>
</div>

JavaScript

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