您的位置：首页 > Web前端 > AngularJS

Angular Light 指令用法

2016-03-21 19:47 537 查看
Angular Light is a library for building interactive MVVM web interfaces/applications. Angular.js + Knockout.js way.

Angularjs:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入

Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。

指令
作用
示例
 


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

   
al-click单击事件<a href al-click="remove(item)">remove</a>http://jsfiddle.net/lega911/RhAgX/
  <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>
 
al-dblclick双击事件 <a href="javascript:;" al-dblclick="remove(item)">remove</a> 
al-dbclick无此用法 <a href="" al-dblclick="remove(item)">remove</a>先触发单击事件
al-submit提交表单执行 <form class="form-inline" al-submit="append()">

<input class="btn" type="submit" value="Append" />
 
    
al-blur元素失去焦点时<input type="text" al-blur="....">http://jsfiddle.net/lega911/e8m9y/
al-change元素的值发生改变时，会发生 change 事件,失去焦点时比较<input type="text" al-change="....."> 
al-focus获得焦点时 <input type="text" al-focus=".....">
返回的是键盘的代码

al-keydown按钮被按下时<input type="text" al-keydown="...">
返回的是ASCII字符

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

al-keyup按钮被松开时<input type="text" al-keyup="..."> 
al-mousedown当鼠标指针移动到元素上方，并按下鼠标按键<div al-mousedown="mousedown++"></div> 
al-mouseenter鼠标指针穿过元素时<div al-mouseenter="mouseenter++"></div> 
al-mouseleave鼠标指针离开元素<div al-mouseleave="mouseleave++"></div> 
al-mousemove获得鼠标指针在页面中的位置<div al-mousemove="mousemove = $event.x + 'x' + $event.y"></div> 
al-mouseover鼠标指针位于元素上方时<div al-mouseover="mouseover++"></div>{{mouseover}} 
al-mouseup松开鼠标按钮时<div al-mouseup="mouseup++"></div> {{mouseup}} 
    


Directives-Controls

   
al-checkedradio,checbox选中<input type="checkbox" al-checked="true" />

或<input type="checkbox" al-checked=true />
 
al-radioradio选中<input type="radio" al-radio=true>checkbox不支持
al-disableal-disable=true时,点击无效<button type="" al-disable=true>按钮</button>angularjs是ng-disabled
al-enable与al-disable相反<button type=""  al-enable=false al-disable=false>按钮</button> (有效) 
al-focused获得焦点<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>
 
al-readonly只读<input type="text" al-readonly=true>
 
    


Directives-Special directives

   
al-text基于属性=基于{{}},加载看不到{{}}
<h3>Hello {{name}}!</h3>

<h3>Hello <label al-text="name"></label>!</h3>
angularjs:ng-bind
al-app指示一个DOM

alight.apps.tagName
<div al-app></div>

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

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

<div al-app="#tag mainCtrl"></div>
 
al-cloak隐藏当前元素，直到激活  
al-controller child scope<div al-controller="Ctrl1"></div>

js:
function Ctrl1(scope) {
}


alight.controllers.Ctrl1 = function(scope) { }
 
al-class/al-cssal-css="done:item.done"
<div class="box"></div> 等于 <div al-class="box:true"><div al-class="box:false">和 <div al-class="box">结果一样
al-hide.

[al-cloak], .al-hide {
  display:  none !important;

 
}
 
al-hide=true  
al-style   
al-html   
al-ifal-if="false"，不显示dom元素<div al-if="n===0" class="wave">Linux</div>

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

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

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

<div al-if="n===1" class="wave">MacOS</div>
al-ifnot和al-if相反  
al-include加载html片段<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>
 loads a html block from the server
al-init初始化 <div al-init="menu='main'; count=7;"></div> 
    
al-repeat加载列表
<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>

<li al-repeat="friend in friends">

[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

</li>

</ul>

</div>
I have 2 friends. They are:
[1] John who is 25 years old.
[2] Mary who is 28 years old.
  条件*1
<li al-repeat="item in list | filter"></li>

 <li al-repeat="friend in friends|filter:25"> 
   http://jsfiddle.net/lega911/vyEcA/
   angularjs

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

可惜al不支持
 {{$index}} 序列<i al-repeat="it in [1,2,3,4,5,6,7,8,9] ">{{$index}}+({{it}})</i> 
 {{$first}}是否首个<span al-if="$first">first</span> 
 {{$last}}是否最后一个<span al-if="$last">last</span> 
al-show是否显示 和al-if比,不影响dom
al-srcsrc里填写绑定的元素<img al-src="http://example.com/{{link}}" />http://angular-light.readthedocs.org/en/latest/directive/al-src.html
al-stop绑定解除<div al-app al-init="title='hello'"> <span>{{title}}</span> <span al-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()

});
filterTo filter the list 过滤 http://jsfiddle.net/lega911/vyEcA/
slice
To slice the list<i al-repeat="it in [1,2,3,4,5,6,7,8,9] |slice:5">({{it}})</i> (6)(7)(8)(9) 

<i al-repeat="it in [1,2,3,4,5,6,7,8,9] |slice:5,7">({{it}})</i>
(6)(7)
 
generator 
<div al-repeat="it in 10 | generator"></div>
<div al-repeat="it in size | generator"></div>

http://jsfiddle.net/lega911/v2uf2/
toArray循环排序
<div al-repeat="item in object | toArray:key,value track by key">


http://jsfiddle.net/lega911/nnk02xpy/
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'

};
 结果：按value的值逆序
code = ubuntu
name = linux
cc = cc
bb = bb
aa = aa
id = 123
version = 11
http://jsfiddle.net/lega911/nnk02xpy/
throttle延时输出<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)
}
}


自测出错
http://jsfiddle.net/lega911/pTT5x/
    


Async filters

异步的过滤器
alight.filters.trottle = function(delay, scope, 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);
}
}
}

http://jsfiddle.net/lega911/fkresedc/
    


Text bindings

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

 
 单次绑定<div al-init="...">

<div>Hello {{=name}}!</div> <a href="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);
}

http://jsfiddle.net/lega911/es8ph/
  <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>

http://jsfiddle.net/lega911/MSMPX/
    


Scope

  http://angular-light.readthedocs.org/en/latest/scope.html
Scope.$watch(name, callback, option)跟踪变量  
Scope.$compile(expression, option)编译表达式

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)
Track the template 跟踪模板

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

 
Scope.$evalText(tpl)
Evalute the template. Method is depricated (since v0.9)

  
Scope.$new(isolate)Create a child Scope, if isolate == true, then child scope will not be inherited from parent scope, if isolate == ‘root’ then it will be separate root scope.

  
Scope.$destroy()Destroy the Scope.  
Scope.$scan(callback or option)find changes
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.$scanAsync(callback)Scope.$scan({late: true, callback: callback})  
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', 1);
scope.$setValue('path.var', 2);
scope.$setValue('path[key]', 3);

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航