angular指令大全

　　这篇文章的案例都是来自官方，引用的cdn来自bootcss， 因为angular的官方网站被屏了， 所以要翻， 不过我把整个文档下回来了，方便大家下载可以点击： 打开下载英文版

　　angular的指令

　　a标签（也就是html的锚标签）；

　　angular的所有事件直接绑定在元素的上，而且事件都是以“ng-****”开头，比如ng-click，ng-keydown，ng-keypress，ng-mouseover....

　　基本的绑定事件代码， 点击a标签会触发该控制器内部$scope的alert事件;

//我们先来看angular的默认的指令
    a标签（也就是html的锚标签）；a标签

 　　form标签

　　form标签的默认属性比较多, 基本上HTML所有的标签都被angular的默认指令扩展了， 所以dom元素有很多多出来的属性可以用，$form.$valid是指这个表单内部的所有元素是否可以通过校验，$ngDirty, $ngInvalid, $ngPristine等;

userType: 
Required!
nono_model: 
userType = {{userType}}
myForm.input.$valid = {{myForm.input.$valid}}
myForm.input.$error = {{myForm.input.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}
myForm input is nono $valid {{myForm.nono.$valid}}

　　表单两种不同的状态如图;

　　input也有很多的angular属性, ng-model是必须的， 如果input有name属性那么，我们直接通过formName.inputName获取该元素，ngMinLength,，ngMaxLength，ng-parttern，通过正则判断input是否匹配，ngChange，这个是一个事件属性，实例：

User name: Required!
Last name: Too short!Too long!
user = {{user}}
myForm.userName.$valid = {{myForm.userName.$valid}}
myForm.userName.$error = {{myForm.userName.$error}}
myForm.lastName.$valid = {{myForm.lastName.$valid}}
myForm.lastName.$error = {{myForm.lastName.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}
myForm.$error.minlength = {{!!myForm.$error.minlength}}
myForm.$error.maxlength = {{!!myForm.$error.maxlength}}

　　input[checkbox]，是checkbox的input元素跟input是不一样的，有了ng-false-value，ng-true-value这两个属性：

Value1:  
Value2: ng-true-value="'YES'" ng-false-value="'NO'"> 
value1 = {{value1}}
value2 = {{value2}}

　　ng-ture-value意思是如果这个input被选中，那么这个input对应的ng-model的值为ng-true-value， 上面的代码对应的输出如下图；

 　　input[date], 日期属性, 可以设置min和max：

Pick a date in 2013:placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />Required!Not a valid date!value = {{value | date: "yyyy-MM-dd"}}
myForm.input.$valid = {{myForm.input.$valid}}
myForm.input.$error = {{myForm.input.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}

　　日期设置了max和min，所以只能选择指定区间的日期：

　　还有emai类型的inputDemo：

Email: Required!Not valid email!text = {{text}}
myForm.input.$valid = {{myForm.input.$valid}}
myForm.input.$error = {{myForm.input.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}
myForm.$error.email = {{!!myForm.$error.email}}

　　input[radio]，这种输入类型有两种属性，第一种是value，对应的是ng-model的值，第二种是ngValue，对应的是$scope内部的变量值：

  Red 
 Green 
 Blue 
color = {{color | json}}
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.

　　input还有很多类型,比如input[text],input[url],input[week],input[month],input[number],angular给不同的input添加了不同的属性，不一一罗列了;

　　ngApp 这个自定义指令很重要，我们上面的所有DEMO都在body元素上添加了ng-app属性， 添加了ng-app属性的元素会自动加载到angular模块里面去， 所以我们就不要写angular.bootstrap(element, ["moduleName"])， 但是自动加载的ng-app在一个页面只能有一个， 两个或者更多就会出现问题, 那么能才能在一个html文件添加多个angular模块呢， 可以得，但是我们不给元素设置ng-app属性，我们手动通过angular.bootstrap加载模块；

{{a}}

{{a}}

　　ok，界面显示一个0，还有一个1， 我们在一个html文件里面启动了两个不关联的app了

　　angular的ng-bind指令, 这个指令是指ng-bind的值就是这个元素的textContent或者是innerText;ng-bind对应的一个ng-bind-html， ng-bind-html指的是ng-bind-html的值为这个元素的innerHTML, 要注意的是ng-bind-html依赖了一个叫做angular-sanitize的模块，所以要手动导入这个JS，要么会报错

Enter name: 
Hello !

　　ng-bind-template指令， 这个指令跟ng-bind 差不多， ng-bind是指替换元素的textContent为ng-bind的值，ng-bind-template是指替换元素的textContent的值为ng-bind-template经过angular.parse().assign的内容;

Salutation: 
Name: 
其实你直接这样写也行
{{salutation}} {{name}}!
压根不需要ng-bind-template

 　　ng-if效果跟ng-show一样， 不同的是ng-if如果是false，那么这个元素的dom节点都没有了，如果为true，那么该节点重新加载到dom；

Click me: 
Show when checked:if="checked" class="animate-if">I'm removed when the checkbox is unchecked.

 　　ng-href，如果一个锚点的链接是动态的，比如>gogogo，如果你点击那么界面会调到{{href}},为了动态添加href，那么ng-href就出现了：

link 2 (link, don't reload)
link 3 (link, reload!)
anchor (link, don't reload)
link (link, change location)

 　　ng-show，和ng-hide如果元素的ng-show为true，那么元素就显示， 否则就隐藏， ng-hide同理

Click me: 
Show: I show up when your checkbox is checked.Hide: I hide when your checkbox is checked.

　　如果ng-show和ng-hide同时存在一个节点上，那么隐藏和显示的状态根据ng-hide展现：

Click me: 
Show: I show up when your checkbox is checked.

　　写着写着，chrome居然崩溃了， 我勒个去， 草稿都没存；

　　ng-cloak存在完全是为了用户体验， 如果一个html界面angular.js还没加载进来，那么界面会有{{}}这样的标志，如果{{}}标志多了，用户会一头雾水啊， ng-cloak如果加在根节点，那么界面的{{}}会被隐藏，等到{{}}完全编译成动态数据的时候界面才可见；

　　ng-class的用处还是很大的，通过模型绑定，我们根本不需要操作class，ng-class允许三种值：

　　1：对象{bold:true,red:false}  那么bold这个class会生效；

　　2：通过空格区分的字符串；

　　3：一个数组，数组的每一个值都要为一个class即可：

Map Syntax Example
 deleted (apply "strike" class)
 important (apply "bold" class)
 error (apply "red" class)
Using String Syntax
Using Array Syntax

　　ng-include指令是指这个指令标签的innerHTML为指定的url，这个url为相对与当前目录的url地址或者绝对地址，angular会通过ajax请求该地址， 然后把地址的内容作为指令元素innerHTML填充；

(blank)url of the template: {{template.url}}

　　　　ng-list这个指令要和ng-model合起来用，ng-list在输入框的表现通过split(",")的数组才是实际的model， ng-list默认为","逗号， 要设置成自定义的区分符，直接为ng-list赋值即可;

List: Required!
names = {{names}}
myForm.namesInput.$valid = {{myForm.namesInput.$valid}}
myForm.namesInput.$error = {{myForm.namesInput.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}

 　　ng-model这个指令是很重要的指令，所有学习angular开发者对这个指令都无比熟悉， ng-model主要绑定的元素包括input， select， textarea 

 　　ng-model的元素都有ng-valid（可用），ng-invalid（不可用）， ng-pristine（用户为对这个元素进行操作过）， ng-dirty（元素的模型发生改变的话）属性； 这几个属性都是布尔值；

Update input to see transitions when valid/invalid.
    Integer is a valid value.

 　　ng-pattern：匹配这个输入框的输入值是否符合这个正则，如果不匹配，这个元素会被加上ng-invalid的class， 如果匹配会被加上ng-valid的class；

　　ng-model还可以指定为一个getersetter，相当于一个preSave，和preGet方法，模型的可控性变好了

Name:ng-model="user.name"ng-model-options="{ getterSetter: true }" />
user.name = 

　　ngModelOption ,可以设置ng-model在元素失去焦点的时候更新model

Name:ng-model="user.name"ng-model-options="{ updateOn: 'blur' }"ng-keyup="cancel($event)" />
Other data:
user.name = 

　　ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-mouseover, ng-mouseup, ng-click, ng-dblclick都是ng的事件这些事件和dom的事件区别是dom事件的执行作用域是该元素， 而angular的事件执行作用域是$scope下， 现在可能不明白，以后自然就懂了；

　　ng-paste， ng-copy， ng-cut是一伙的，如果输入框的值是粘帖的，那么ng-paste就为真， ng-copy，ng-cut也是同理 ， 提供了demo：

pasted: {{paste}}

　　ng-non-bindable指令指该元素的内部{{****}}不被绑定和转义，不受angular的掌控：

Normal: {{1 + 2}}
Ignored: {{1 + 2}}

的输出值为 == 》》Normal: 3
Ignored: {{1 + 2}}

　　ng-readonly指令是指ng-model的只读， 不能随便更改， 和ng-disabled差不多， ( •̀ ω •́ )y肯定有区别

Check me to make text readonly: 

Click me to toggle: 
Button

　　ng-open， 这个我也认为和ng-open， ng-hide差不多， 区别是ng-open只能绑定details元素，（details标签目前只有webkit浏览器支持）， 当ng-open的值为open那么绑定的details内部的summary元素就显示

Check me check multiple: 
Show/Hide me

　　ng-repeat和（ng-repeat-start，ng-repeat-end）都是循环一个items， 区别是ng-repeat-start可以跨越多个标签， 而ng-repeat只能在一个标签里面循环， ng-repeat-start也很有用，因为可以跨多个标签， （其实只要把ng-repeat放在ng-repeat-start的父级，可以模拟ng-repeat-start， 个人想法....）DEMO:

使用ng-repeat-start和ng-repeat-end的循环
Header {{ item }}
Body {{ item }}
使用ng-repeat的循环{{item}}

 　　ng-repeat里面提供了几个变量，为开发者提供一些快捷的操作，

　　　　$index : 表示当前item的索引,

　　　　$first : 如果item为第一个，那么$first为true ,

　　　　$middle : 如果item不是开头，不是结尾$middle为true,

　　　　$last : 如果item是最后一个，  $last为true,

　　　　$even : 如果索引为偶数， 那么$even为true,否则为false

　　　　$odd : 同上， 索引为奇数$odd为true....;

　　如果你喜欢的话，可以循环对象的key和value，比如

{{name}}+{{age}}

　　ng-repeat还提供了别的特性， 让循环更加强大， 可以这么写 item in items | filter:x as results，结果filter过滤后的结果会被保存到results，可以这么用：

friends = [{name:'John', age:25, gender:'boy'},{name:'Jessie', age:30, gender:'girl'},{name:'Johanna', age:28, gender:'girl'},{name:'Joy', age:15, gender:'girl'},{name:'Mary', age:28, gender:'girl'},{name:'Peter', age:95, gender:'boy'},{name:'Sebastian', age:50, gender:'boy'},{name:'Erika', age:27, gender:'girl'},{name:'Patrick', age:40, gender:'boy'},{name:'Samantha', age:60, gender:'girl'}
]">I have {{friends.length}} friends. They are:
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
if="results.length == 0">No results found...

　　ng-selected这个指令我是不怎么用到， 这个指令的值指向一个模型， 如果这个模型为真， 那么这个ng-selected就是select标签的当前选中选项

Check me to select: 
Hello!Greetings!

　　ng-src这个指令也有用的， 界面加载的时候才不管img的标签src有什么，都会一并加载， 如果图片的src包含了{{****}}这些字符， 浏览器不会管这是什么东西， 在渲染dom树的时候，会直接请求这个地址，如果想通过{{****}}动态生成img标签的src，不要用src，要用ng-src。

　　script标签可以作为ng-include的模板使用，把类型type设置为"text/ng-template":

Load inlined template

　　ng-switch这个指令相当于通过$scope内部变量控制dom的隐藏和显示：

selection={{selection}}
ng-switch on="selection">switch-when="settings">Settings Divswitch-when="home">Home Spanswitch-default>default

　　通过ng-switch来控制dom结构，其实这个指令非常强大哦， 相当于是为html代码提供了ifelse的功能（因为angular的html中不能通过ifelse控制逻辑）：

switch="item">——————————————————————switch-when="settings">Settings Divswitch-when="home">Home Spanswitch-default>default

　　ng-value这个指令的demo：

Which is your favorite?
for="{{name}}">{{name}}ng-model="my.favorite"ng-value="name"id="{{name}}"name="favorite">You chose {{my.favorite}}

　　ng-style指令demo， 这个指令接收一个对象， 对象的key为css名字，val为样式的值， val我们可以绑定$scope中的变量：

Sample Text
myStyle={{myStyle}}

　　周末好快就过完了，睡(￣o￣) . z Z一觉起床上班啦， 因为写的匆忙， 有错别字或者代码错误欢迎指正；

转载于:https://www.cnblogs.com/diligenceday/p/4279767.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！