Create Directives

alight.directives.al.text = function(element, name, scope, env) {
     // a function to set a text to the DOM-element
     var setter = function(text) {
         $(element).text(value)
     }

     // Track to the variable
     scope.$watch(name, setter, {
         init: true  // Run the setter immediately
     });
 };

Directives-events

<div al-app al-controller="tt">
<input type="text" name="" al-value='msg'>
<input type="button"al-click="alert(msg)"value="按钮">
</div>

js:

<script>
function tt (scope) {
scope.alert=function (dd) {
alert(dd?dd:'')
}
}
</script>

<form class="form-inline"al-submit="append()">

<input class="btn" type="submit" value="Append" />

返回的是键盘的代码

返回的是ASCII字符

如果只想读取字符,用KeyPress,如果想读各键的状态,用KeyDown. 

Directives-Controls

<input type="checkbox" al-checked="true" />

或<input type="checkbox" al-checked=true />

<div al-app al-init="focused=true">
<a href al-click="focused=true">focus</a>
<a href al-click="focused=false">blur</a>
<input type="text" al-focused="focused" /> {{focused}}
</div>

<input type="text" al-readonly=true>

Directives-Special directives

基于属性=基于{{}},加载看不到{{}}

<h3>Hello {{name}}!</h3>
<h3>Hello <label al-text="name"></label>!</h3>

指示一个DOM

alight.apps.tagName

<div al-app></div>
<div al-app="mainCtrl"></div>
<div al-app="#tag"></div>
<div al-app="#tag mainCtrl"></div>

<dival-controller="Ctrl1"></div>

js:

function Ctrl1(scope) {
 }

alight.controllers.Ctrl1=function(scope){}

al-css="done:item.done"

<dival-if="n===0"class="wave">Linux</div>
<dival-if="n===1"class="wave">MacOS</div>

页面：

<!-- al-if: n===0 -->

<!-- al-if: n===1 -->

<div al-if="n===1" class="wave">MacOS</div>

<div al-app al-init="page='red.html'">
<button al-click="page='red.html'">Red</button>
<button al-click="page='green.html'">Green</button>
<button al-click="page=null">None</button>
<div class="my-slide-container">
<div al-include="page" class="my-fade-animation"></div>
</div>
</div>

加载列表

<li al-repeat="item in list"></li>

<div al-app al-init="friends = [{name:'John',age:25},{name:'Mary',age:28}]">

I have {{friends.length}} friends. They are:
<ul>
<lial-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>

• [1] John who is 25 years old.
• [2] Mary who is 28 years old.

<li al-repeat="item in list | filter"></li>

angularjs

<i ng-repeat="it in [1,2,3,4,5,6,7,8,9] |limitTo:5">({{it}})</i>

可惜al不支持

<dival-appal-init="title='hello'"><span>{{title}}</span><spanal-stop>{{title}}</span></div>

hello{{title}}

http://angular-light.readthedocs.org/en/latest/directive/al-stop.html

Directives:Bind-once

• bo-if
• bo-ifnot
• bo-repeat
• bo-src
• bo-switch
• bo-switchDefault
• bo-switchWhen

Base filters

data

{{when |date:yyyy-mm-dd}}

alight.controllers.ac=function(scope) {
scope.when=new Date();
}

angularjs

<span>{{a| date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

app.controller('w',function($scope){
$scope.a = new Date()
});

slice

<i al-repeat="it in [1,9]|slice:5">({{it}})</i>(6)(7)(8)(9)

<i al-repeat="it in [1,255)">|slice:5,7">({{it}})</i> (6)(7)

<div al-repeat="it in 10 | generator"></div>
<div al-repeat="it in size | generator"></div>

orderBy

<div al-repeat="(key,value) in user orderBy:'value',false">
{{key}} = {{value}}
</div>

js:

scope.user = {
id: '123',
bb: 'bb',
name: 'linux',
version: '11',
code: 'ubuntu',
aa: 'aa',
cc: 'cc'
};

<div al-app>
<input type="text" al-value="name" />
{{name |throttle:2000}}
</div>

Create filters

alight.filters.mylimit = function(exp, scope) {
    var ce = scope.$compile(exp);       // compile the input expression
    return function(value) {            // return handler
        var limit = Number(ce() || 5);
        return value.slice(0, limit)
    }
}

自测出错

Async filters

alight.filters.trottle = function(delay, env) {
    delay = Number(delay);
    var to;
    return {
        onChange: function(value) {
            if(to) clearTimeout(to);
            to = setTimeout(function() {
                to = null;
                env.setValue(value);
                scope.$scan();
            }, delay);
        }
    }
}

Text bindings

<div>Hello {{name}}!</div>
<a href="htp://example.com/{{link}}>link</a>

<div al-init="...">

<div>Hello {{=name}}!</div><ahref="htp://example.com/{{=link}}>link</a>

</div>

Text directives

<div al-app>
    counter {{#counter}}
</div>

js:

 alight.text.counter = function(callback, expression, scope) {
     var n = 0;
     setInterval(function(){
         n++;
         callback(n)  // set result
         scope.$scan()  // $digest
     }, 1000);
 }

<div al-app>
<input type="text" placeholder="{{#ctd 3}}" />
{{#ctd 1}} Angular Light
</div>

<script>
alight.text.ctd = function(callback,expression,scope) {
var step = scope.$eval(expression); // eval expression
// step = eval(expression);
var index = 0;
callback(index); // set init result
setInterval(function(){
index += step;
callback(index); // set result
scope.$scan() // $digest
},1000);
}
</script>

One-time binding

<div class="red {{::class}}"> {{::text}} </div>
<div al-show="::visible"></div>
<li al-repeat="it in ::list">...</li>

Scope

编译表达式

option:

• option.input- list of input arguments
• option.no_return- a function will not return any result (compile a statment)
• option.string- result of method will convert to string

var scope = alight.Scope()
 var fn = scope.$compile('"hello " + title')
 scope.title = 'linux'
 fn() // return "hello linux"
 scope.title = 'macos'
 fn() // return "hello macos"

Scope.$eval(expression)

Scope.$watchText(tpl,callback)

Scope.$compileText(tpl)

var scope = alight.Scope()
var fn = scope.$compileText('Hello {{title}}!')
scope.title = 'linux'
fn() // return "Hello linux!"

Scope.$evalText(tpl)

var scope = alight.Scope()
scope.$watch('title', function(value) {
    console.log('title =', value)
}) // make observing
scope.title = 'new'
scope.$scan()
// print title = new
scope.title = 'linux'
scope.$scan()
// print title = linux
scope.$scan()
// do nothing

Scope.$getValue(name)

Scope.$eval

获取数值

Scope.$setValue(name,value)

scope.var = 1;
scope.path.var = 2;
scope.path[scope.key] = 3;

// equal
scope.$setValue('var',153)">1);
scope.$setValue('path.var',153)">2);
scope.$setValue('path[key]',153)">3);