aLight: Text directive

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.49b.min.js"></script>
<div al-app al-init="user_id = '555'">
    id = <input type="text" al-value="user_id" /> <br/>
    into href = <a href="http://example.com/?search={{#loadLoginById user_id}}">user's page</a> <br/>
    into title = <span title="{{#loadLoginById user_id}}">user</a> <br/>
    into text = {{#loadLoginById user_id}}
</div>

JavaScript

alight.text.loadLoginById = function(callback, expression, scope) {
    callback('loading...');  // set first value
    
    function request_to_server(user_id) {
        setTimeout(function(){
            var login = 'user_' + user_id + '_here';
            callback(login)  // set result
            scope.$scan()  // $digest
        }, 3000)
    }
    
    var w = scope.$watch(expression, request_to_server);  // watch model "user_id"
    request_to_server(w.value);  // request current user_id
}