ANGULAR自带指令有哪些？
1.背景介绍
AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
2.知识剖析
angular指令分为：内置指令 && 自定义指令。
内置指令：AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
例如：
√
自定义指令：除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令，HTML 元素上需要添加自定义指令名。
例如：
内置指令
angular自带的指令，共有60多个。
AngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素，比如 form 和 a 标签，当在HTML中使用标签时，并不一定能明确看出是否在使用指令。
例如， form 标签被从底层扩展了一系列高级功能，包括表单验证等，原生HTML表单并不会提供这些功能。其他内置指令通常以ng为前缀，很容易识别。
所有以ng前缀开头作为命名空间的指令都是AngularJS提供的内置指令，因此不要把你自己开发的指令以这个前缀命名。
常用的内置指令：
ng-app: 使用该指令自动启动一个AngularJS应用。ng-app指令指定的应用程序的根元素，通常放置在网页的根元素如body或html 标签。
ng-controller:该指令用于实例化指定的控制器对象。ngController指定一个Controller类，这个类控制业务逻辑和模型的在视图的绑定。
ng-class：指定 HTML 元素使用的 CSS 类，ngclass指令允许你动态设置CSS类在一个HTML元素的数据绑定表达式，代表所有的类被添加。
ng-click： 定义元素被点击时的行为
ng-model: 绑定 HTML 控制器的值到应用数据
ng-bind:绑定 HTML 元素到应用程序数据
ng-repeat: 定义集合中每项数据的模板
自定义指令
通过AngularJS模块API中的.directive()方法，我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的，函数应该返回一个对象,包含了用来定义和配置指令所需的方法和属性。
angular.module("myApp", [])
.controller('demoCtrl',function ($scope) {
$scope.aa='as111111'
})
.directive('demoOne',function () {
return{
restrict:"AECM",
template:'',
replace: true,
scope:{},
controller:['$scope',function ($scope) {
$scope.aa='ss1212'
}]
}
})
restrict属性有4个值元素（E） 、属性（A） 、类（C）或注释（M）用以制定格式来调用，可以有不止一种格式，比如 restrict: 'EAC'
replace的值决定它的模板是嵌套入标签中还是取而代之，若replace值为true，则显示的为
否则默认情况下， AngularJS将模板生成的HTML代码嵌套在自定义标签内部。
scope参数是自定义指令中比较重要的一个参数，一共有3个属性值：true && false && {}
第一种情况:scope:true
继承父作用域，并且新建独立作用域
第二种情况:scope:false
共享父作用域
第三种情况:scope:{}
不继承父作用域，创建新的独立作用域
3.常见问题
指令的优先级
ng-if和ng-show之间的区别
4.解决方案
指令的优先级
优先级参数可以被设置为一个数值。大多数指令会忽略这个参数，使用默认值0，但也有些 场景设置高优先级是非常重要甚至是必须的。例如， ngRepeat将这个参数设置为1000，这样就可 以保证在同一元素上，它总是在其他指令之前被调用。 如果一个元素上具有两个优先级相同的指令，声明在前面的那个会被优先调用。如果其中一 个的优先级更高，则不管声明的顺序如何都会被优先调用：具有更高优先级的指令总是优先运行。
ng-if和ng-show之间的区别
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。 当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。
ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除， 否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。
5.编码实战
6.扩展思考
自定义指令中，作用域之间的数据交互是怎么样的？
修饰符'@' '=' '&'的用法
”＝“：指令中的属性取值为controller中相应$scope上属性的取值，可用于双向数据的绑定
”@“：指令中的取值为html中的字面量/直接量；建立一个local scope property到DOM属性的绑定。
”&“：指令中的取值为Contoller中相应$scope上的属性。可是这属性必须为一个函数回调
7.参考文献
angular权威教程pdf
https://www.gitbook.com/book/xiaoxiami/angularjs/details
angular中文社区
AngularJS指令参数详解
8.更多讨论
自定义指令中的link和compile之间的区别。
ANGULAR自带指令有哪些？_腾讯视频
文本链接：http://www.jnshu.com/daily/23750
PPT链接：https://ptteng.github.io/PPT/PPT/JS-08-angular%20directives.html#/
视频链接：https://v.qq.com/x/page/k0503p9oko9.html
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！http://www.jnshu.com/login/1/64290793
网友评论