分享人:吴昊 李兴
=======分享人:胡嘉杰
>>>>>>>目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
√
自定义指令:除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
angular自带的指令,共有60多个。
AngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素,比如 form 和 a 标签,当在HTML中使用标签时,并不一定能明确看出是否在使用指令。
例如, form 标签被从底层扩展了一系列高级功能,包括表单验证等,原生HTML表单并不会提供这些功能。其他内置指令通常以ng为前缀,很容易识别。
所有以ng前缀开头作为命名空间的指令都是AngularJS提供的内置指令,因此不要把你自己开发的指令以这个前缀命名。
自定义指令
通过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,则显示的为
Click me to go to Google
否则默认情况下, AngularJS将模板生成的HTML代码嵌套在自定义标签内部。
Click me to go to Google
scope参数是自定义指令中比较重要的一个参数,一共有3个属性值:true && false && {}
第一种情况:scope:true
继承父作用域,并且新建独立作用域
第二种情况:scope:false
共享父作用域
第三种情况:scope:{}
不继承父作用域,创建新的独立作用域
指令的优先级
ng-if和ng-show之间的区别
指令的优先级
优先级参数可以被设置为一个数值。大多数指令会忽略这个参数,使用默认值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节点,而是删除或者新增结点。
angular权威教程pdf
https://www.gitbook.com/book/xiaoxiami/angularjs/details自定义指令中的link和compile之间的区别。
感谢大家观看
<<<<<<< HEADBY :吴昊| 李维文| 翟金超 | 杨泽平
=======BY :李维文| 胡嘉杰| 李兴
>>>>>>>