还是打算分开来写，因为这部分正好打算写一下Angular JS里面的常用指令，篇幅会比较多，就不放在一起了。
接上部分继续说一下Angular JS的骚操作23333
（四）常用指令
使用这些指令可以省去频繁的DOM操作
1.ng-bind
作用与{{}}类似，但是用ng-bind比{{}}更好，可以解决{{}}闪烁问题
<body ng-app="app" ng-controller="appCtrl">
<!-- 两者等价，只是在网络比较慢的时候上面会出现显示源码的情况 -->
<p>{{ val }}</p>
<p ng-bind="val">{{ val }}</p>
</body>
2.ng-cloak
作用：如果喜欢使用{{}}，又要解决闪烁问题，可以使用ng-cloak配合css实现
原理：Angular渲染视图时会自动去除元素身上的ng-cloak属性，好让元素显现出来
<style>
[ng-cloak] {
display: none;
}
</style>
<!-- 视图渲染前body为隐藏状态，body子元素中的使用{{}}变被一起隐藏掉 -->
<!-- 视图渲染时Angular会自动去除ng-cloak属性，元素变正常显示 -->
<body ng-cloak ng-app="app" ng-controller="appCtrl">
<p>{{ val }}</p>
<p ng-bind="val">{{ val }}</p>
</body>
3.ng-if
作用：控制元素的插入与移除
<body ng-app="app" ng-controller="appCtrl">
<!-- 这里的isLive是$scope中定义的属性 -->
<p ng-if="isLive1">{{ val }}</p>
<p ng-if="isLive2">{{ val }}</p>
</body>
4.ng-show
<body ng-app="app" ng-controller="appCtrl">
<!-- 这里的isShow是$scope中定义的属性 -->
<p ng-show="isShow1">{{ val }}</p>
<p ng-show="isShow2">{{ val }}</p>
</body>
5.ng-repeat
作用：遍历数组或对象，也可指定遍历次数
注意：如果遍历的值存在相等的情况会报错，需要添加track by指定唯一key
因为ng-repeat会生成很多元素，数据一改变，所有元素又得重新解析渲染一遍
<body ng-app="app" ng-controller="appCtrl">
<!-- 遍历数组 -->
<ul>
<!-- angular为了提高性能，会对数据进行比较，如果没有改变的元素不会重复编译生成 -->
<!-- 但是这个优化需要给每个元素指定一个唯一key，默认这个key就是遍历到的值，key是不能重复的，重复报错 -->
<li ng-repeat="val in list track by $index">{{ val }}</li>
<li ng-repeat="(i, val) in list track by i">{{ i }}:{{ val }}</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li ng-repeat="val in obj">{{ val }}</li>
<li ng-repeat="(k, val) in obj">{{ k }}:{{ val }}</li>
</ul>
</body>
6.ng-class
作用：动态设置或控制类名
<body ng-app="app" ng-controller="appCtrl">
<!-- 一、字符串：通过$scope属性动态设置类名 -->
<div ng-class="classes"></div>
<!-- 二、数组：通过$scope属性精确设置类名 -->
<div ng-class="[ className1, className2 ]"></div>
<!-- 三、对象：通过$scope属性控制类名 -->
<div ng-class="{ ‘a‘: hasA: ‘b‘: hasB, ‘c‘: hasC }"></div>
<div ng-class="{ ‘a b c‘: hasClass }"></div>
<div ng-class="{ [classes]: hasClass }"></div>
</body>
7.ng-事件
作用：元素事件绑定
备注：如果回调需要事件对象，传入$event即可
<body ng-cloak ng-app="app" ng-controller="appCtrl">
<p>{{ number }}</p>
<button ng-click="add()">点击add</button>
<button ng-mousemove="add($event)">移动add</button>
</body>
8.ng-module
通常网站会有一些需要用户填写并提交数据的表单，这个指令处理表单就是神器
作用：表单与数据双向绑定，任意一方的值发生改变另一方跟着变
<body ng-app="app" ng-controller="appCtrl">
<input type="text" ng-model="val" />
<input type="text" ng-model="val" />
<h1>{{ val }}</h1>
</body>
9.ng-include
通过ajax的方式引入一段html作为子元素
注意：重复加载同一个模版只会请求一次，因为Angular会自动缓存
<body ng-app="app" ng-controller="appCtrl">
<header ng-include="tpl/header.tpl"></header>
<section ng-include="tpl/section.tpl"></section>
<section ng-include="tpl/section.tpl"></section>
<footer ng-include="tpl/footer.tpl"></footer>
</body>
?常见事件
- ng-click：点击
- ng-dblclick：双击
- ng-mousedown：鼠标按下
- ng-mouseup：鼠标放开
- ng-mouseenter：鼠标进入
- ng-mouseleave：鼠标离开
- ng-mousemove：鼠标移动
- ng-keydown：键盘按下
- ng-keyup：键盘放开
- ng-change：值发生改变
- ng-paste：表单粘贴
- ng-copy：表单复制
- ng-cut：表单剪切
- ng-submit：表单提交
（五）特殊指令
ng-src
作用：主要是为了解决原生属性在配合Angular使用时存在的bug
比如这样写<img src="{{ imgUrl }}" />
浏览器首先会发起一个‘{{ imgUrl }}‘请求
当DOM解析完毕后，Angular才会把imgUrl替换成正确的值
这时候浏览器才会发起正确请求展示img
不足之处：访问$scope的属性，必须使用{{ }}表达式，不能直接使用属性名
<body ng-app="app" ng-controller="appCtrl">
<!-- 一、如果不使用ng指令，那么浏览器会额外发起多余的{{ imgUrl }}请求 -->
<img ng-src="{{ imgUrl }}" />
</body>
ng-href
作用：主要是为了解决原生属性在配合Angular使用时存在的bug
不足之处：访问$scope的属性，必须使用{{ }}表达式，不能直接使用属性名
<body ng-app="app" ng-controller="appCtrl">
<!-- 预防a标签点击时造成的页面刷新 -->
<a ng-href=""></a>
<!-- 预防Angular解析未完成时，点击跳转到错误的url -->
<a ng-href="{{ skipUrl }}"></a>
</body>
（六）指令的种类
指令的定义：
- HTML在构建应用时存在诸多不足
- Angular通过扩展一系列的HTML属性或标签来增强HTML
- Angular内置了很多指令，也允许我们自定义指令
指令分为属性指令，标签指令，类名指令，注释指令。
(1) 属性指令
最常见使用最频繁的指令
属性指令主要是为了封装重复的DOM操作
<p ng-show="true">显不显示呢</p>
eg
属性指令主要是为了操作DOM，一般不会替换元素的子节点
这里的例子会替换元素子节点是因为实现比较简单
目的是为了先让大家对不同类型的指令有个基本认识
<body ng-app="app">
<div ngl-tpl></div>
</body>
var app = angular.module(‘app‘, []);
app.directive(‘nglTpl‘, [function() {
return {
// 配置指令类型：A:属性，E:标签，C:类名，M:注释
restrict: ‘A‘,
// 替换元素innerHTML
template: ‘<p>我是指令模版</p>‘
};
}]);
(2) 标签指令
使用频率第二的指令
标签指令主要是为了抽取页面中可复用的组件
<ng-view></ng-view>
eg
<body ng-app="app">
<ngl-tpl></ngl-tpl>
<ngl-tpl2></ngl-tpl2>
</body>
var app = angular.module(‘app‘, []);
app.directive(‘nglTpl‘, [function() {
return {
// 指令类型A:属性，E:标签，C:类名，M:注释
restrict: ‘E‘,
// 替换元素innerHTML
template: ‘<p>我是指令模版</p>‘
};
}]);
var app = angular.module(‘app‘, []);
app.directive(‘nglTpl2‘, [function() {
return {
restrict: ‘E‘,
template: ‘<section><p>我是指令模版</p><p>我是指令模版</p><section/>‘,
// 如果想把原来的元素覆盖掉，可以配置为true，
// 设为true之后模版必须使用一个根元素包裹起来，
// 建议设为true，防止自定义标签出现在DOM中
replace: true
};
}]);
(3) 类名指令
操作拥有特定class的元素，不常用，属性指令可替代
<p class="指令名称">操作我</p>
eg
<body ng-app="app">
<div class="a ngl-tpl c"></div>
<div class="a nglTpl c"></div>
</body>
var app = angular.module(‘app‘, []);
app.directive(‘nglTpl‘, [function() {
return {
// 配置指令类型：A:属性，E:标签，C:类名，M:注释
restrict: ‘C‘,
// 替换元素innerHTML
template: ‘<p>我是指令模版</p>‘
};
}]);
(4) 注释指令
通过特定格式的注释使用，不常用，标签指令可替代
注释指令必须配置replace为true.
<!-- directive:指令名称 -->
eg
<body ng-app="app">
<!-- directive:ngl-tpl -->
<!-- directive:nglTpl -->
</body>
var app = angular.module(‘app‘, []);
app.directive(‘nglTpl‘, [function() {
return {
// 配置指令类型：A:属性，E:标签，C:类名，M:注释
restrict: ‘M‘,
// 替换元素innerHTML
template: ‘<p>我是指令模版</p>‘
};
}]);
语法
和控制器的定义方式差不多，可以配置服务依赖与一个回调
语法：模块.directive(name, [ 服务依赖..., function() { return config } ])
命名规则
名字必须使用驼峰式命名
使用时需要通过-分隔单词，主要是标签名与属性名
注意：使用指令不一定需要控制器，除非要实现数据动态化
（七）小结
服务是为了封装可复用的业务逻辑
指令是为了封装可复用的dom操作或视图组件
如果是dom操作，封装为属性指令
如果是视图组件，封装为元素指令