AngularJS1.X指令

【AngularJS1.X指令】的更多相关文章

<!DOCTYPE html> <html ng-app='myApp'> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller…

AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. 一.事件指令先盗张图,这个图展示了AngularJS中定义的事件指令,下面来做一些测试. 指令作用描述 ng-blur 属性.类对blur事件指定自定义行为,在元素失去焦点时被触发 ng-change 属性.类对change事件指定自定义行为,在表单元素的内容状态发生变化时被触发(例如…

AngularJS1.X学习笔记3-内置模板指令

前面学习了数据绑定指令,现在开始学习内置模板指令.看起来有点多,目测比较好理解.OK!开始! 一.ng-repeat 1.基本用法 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>databinding1</title> </head> <…

AngularJS1.X学习笔记10-自定义指令（下）

继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. 一.在一个控制器中应用同一指令 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <ti…

AngularJS1.X学习笔记9-自定义指令（中）

今天好大的雨啊!上一节中,我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数,事实上我们的工厂函数也是可以返回一个对象,这个对象里面可以包含很多的属性,这使得我们可以创建更加强大的指令. 一.link属性这个属性的值是一个函数,叫做链接函数. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"…

AngularJS1.X学习笔记8-自定义指令（上）

AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较复杂的,下面开始攻关. 一.三个重要参数 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> &l…

angularJS1笔记-(17)-ng-bind-html指令

angular不推荐大家在绑定数据的时候绑定html,但是如果你非要这么干也并不是不可以的.举个例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body ng-app ng-init="username='<h1>sh…

angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)

自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令的优先级是0(但ng-repeat指令的优先级默认是1000). 属性terminal:为true时,指示优先级小于当前指令的指令都不执行,仅执行到本指令. index.html: <!DOCTYPE html> <html lang="en"> <head&…

angularJS1笔记-(10)-自定义指令(templateUrl属性)

index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div ng-app="myApp"> <script type="text/ng-template" id="customTags2"&…

angularJS1笔记-(9)-自定义指令(restrict/template/replace)

index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div ng-app="myApp"> <custom-tags>122</custom-tags> <div class="custom-ta…