(如果没有特别指明,则所有的HTML元素都支持该标记)
(如果没有特别指明,则 AngularJS 指令不会覆盖原生js的指令)
1、数据绑定类:
1、插值语法:{{}}
2、标签内容绑定:ng-bind
定义:使用给定的 变量/表达式 的值来替换 HTML 元素的内容
3、表单控件双向绑定:ng-model
定义:绑定 HTML 表单元素到 scope 变量中,如果 scope 中不存在变量,将会创建它
使用范围:支持该指令的元素:<input> <select> <textarea>.....支持用户输入的表单标签
2、事件(动作)绑定类:
1、点击事件:ng-click //绑定的是事件调用,对比原生 js 的点击事件
<button ng-click = "toggle()">点击</button>
<button onclick = "fun()"> 点击</button>
2、双击事件:ng-dblclick
3、获得焦点事件:ng-focus
4、失去焦点事件:ng-blur
5、数据改变事件:ng-change
需要搭配 ng-model 指令使用
该指令不会覆盖原生事件,当原生onchange事件触发,ng-change表达式与原生的onchange事件都会执行
该事件在每次改变时触发,不需要等待一个完成的修改过程或者等待失去焦点的动作
该事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改
使用范围:<input><select><textarea>支持
3、加载预处理类
1、ng-cloak:
页面加载时防止页面闪烁(其实也就是防止在 angularjs 还没有加载完成的时候 {{}} 内容以字符串的形式显示)
解决ng-cloak不起作用的问题,在头部引入一下css:
原理其实就是对 ng-cloak 的相关元素设置了 display:none!important; 隐藏相关内容,这样在页面还没准备好的时候就不显示,当 angular 指令开始解析的时候就把 ng-cloak 这个属性去除掉,这样元素就又现显示出来了。可是当我们的 angular.js 在页面最后加载的时候,就不能使 ng-cloak 达到预期的效果,因为 angular 还没加载的时候,页面内容就已经显示出来了。为了不违背 css 在前 js 在后的原则,而又让 ng-cloak 发挥作用,这时候就需要在页面最前面加上以下 css 样式,手动让其隐藏。
@charset "UTF-8";
[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{
display:none !important;}
ng:form{display:block;
}
.ng-animate-start{
clip:rect(0,auto,auto,0);
-ms-zoom:1.0001;}
.ng-animate-active{
clip:rect(-1px,auto,auto,0);
-ms-zoom:1;
}
2、ng-src:
为 img 指定图片地址,需要使用 ng-src 替代 src
是否覆盖原生的<img>:是
使用范围:<img>
注意:在 AngularJS 代码执行前不显示图片
3、ng-href:
添加链接地址
是否覆盖原生的<a>:是
使用范围:<a>
如果在 href 的值中有 AngularJS 代码,则需要使用 ng-href 替代 href
属性值可以包含{{}}任意字符串
4、状态设置类:
1、ng-class
方式1:$scope.classOptions={
类名1:false,
类名2:true
}
方式2:$scope.classOptions={
类名1:$even,
类名2:$middle,
类名3:$odd
}
偶数行显示 类名1 样式,中间行显示 类名2 样式,奇数行显示 类名3 样式
2、ng-style绑定样式:
ng-style={
backgroundColor="yellow"
}
3、