下载文档原格式
Angular 中的常用指令1、Ng—app 模块入口指令指令定义了 AngularJS 应用Ng-app的作用域为当前div2、Ng—controller 控制器（功能入口指令）指令定义了应用控制器Ng—controller的作用域为当前div3、Ng—show 展示指令，返回值为boolean4、Ng-hide 隐藏指令，返回值为boolean5、Ng—if 隐藏标签指令,返回值为boolean6、Ng—click 点击事件指令7、Ng—mouseover 鼠标移上指令8、Ng—事件名事件指令9、数据绑定｛{name}} （有闪烁）10、Ng-bind 单数据绑定指令（无闪烁）11、Ng—bind-template 多数据绑定指令（无闪烁）12、Ng-cloak 多数据绑定指令（无闪烁）13、Ng-class 操控类名指令14、Ng—style 操控样式指令15、Ng-src 操控图片地址16、Ng—href 操控a标签地址17、Ng-include 插入模块指令18、Ng—model 绑定数据(相当于$scope对象创建属性）19、Ng-init 设置默认数据指令20、Ng-Repeat 遍历数据指令Ng—repeat="value in 自定义数据名"21、Ng—options 遍历数据指令（用于下拉菜单数据遍历)22、Ng-checked23、Ng—disabled24、Ng—readonly25、Ng-submit 使用angular监听表单提交,用在form上26、Ng-open 返回值为boolean 常用于details标签，用作显示隐藏27、Ng—cut 剪切事件28、Ng—copy 拷贝事件29、Ng—paste 粘贴事件30、Ng—change 内容改变时执行31、Ng—class-even 在偶数行起作用的css类32、Ng-model-options 规定如何更新模型33、ng-non—bindable 规定元素不能绑定数据34、ng—transclude 一般用在自定义指令中模板中，使其替换的标签内部的子元素嵌套在模板中,并且自定义指令必须有transclude:true35、自定义指令App。
Angular1.x入门和项目开发第1天课堂笔记班级：全栈前端训练营0219班讲师：邵山欢日期：2017年6月14日邵山欢老师微博：@邵山欢QQ:179427026E-mail:ssh@爱前端官网：目录Angular1.x入门和项目开发 (1)目录 (2)零、框架课程概述 (3)一、通过HelloWorld认识MVVM (3)1.1HelloWorld (3)1.2引入控制器 (5)1.3Angular简介 (7)1.4MV* (10)二、双向数据绑定 (12)三、狠砸思维-只关心数据！不关心DOM！ (13)3.1调色板 (13)3.2微博发布框 (15)3.3小小学生表格 (16)3.4联动下拉框 (18)四、Angular中的脏检查 (22)零、框架课程概述Angular共622个职位满足条件react共1017个职位满足条件vue共819个职位满足条件在中国的市场，Angular有10%的公司使用，React和Vue分掉了剩下的90%，各占60%、40%。
React还会越来越多的公司使用，份额更大。
课程颠覆性极强，彻底颠覆我们做网站的思维。
“MVVM+组件化开发”是一个特别引人入胜的模式。
代码量更大，项目更牛ｘ，要更下功夫。
一、通过HelloWorld认识MVVM1.1HelloWorld在百度静态资源库，可以下载Angular1：/我们引包，然后书写一条js程序，并且在html标签上添加了第一条“指令”。
<!DOCTYPE html><html lang="en"ng-app="app"><head><meta charset="UTF-8"><title>angular学习</title></head><body><h1>{{1+2}}</h1><script type="text/javascript"src="js/angular.min.js"></script><script type="text/javascript">//定义模块，"app"是模块的名字，[]表示当前这个模块的依赖为空。
已经用了angular很久积累了一些很实用的指令，需要的话直接拿走用，有问题大家一起交流1.focus时，input:text内容全选angular.module('my.directives').directive('autoselect', [function () {return {restrict: 'A',link: function (scope, element, attr) {if (element.is("input") && attr.type === "text") {var selected = false;var time = parseInt(attr["autoselect"]);element.bind("mouseup", function (e) {if (selected) {e.preventDefault();e.stopPropagation();}selected = false;});if (time > 0) {element.bind("focus", function (event) {setTimeout(function () {selected = true;event.target.select();}, time);});} else {element.bind("focus", function (event) {selected = true;event.target.select();});}}}};}]);2.clickOutside指令，外部点击时触发,click-outside="func()" func为自己指定的方法，一般为关闭当前层的方法，inside-id="" 点击指定id的输入框时，当前层不关闭angular.module('my.directives').directive('clickOutside', ['$document', function ($document) {link: function (scope, element, attrs) {$(element).bind('mousedown', function (e) {e.preventDefault();e.stopPropagation();});$("#" + attrs["insideId"]).bind('mousedown', function (e) {e.stopPropagation();});$("#" + attrs["insideId"]).bind('blur', function (e) {setTimeout(function () {scope.$apply(attrs.clickOutside);});});$document.bind('mousedown', function () {scope.$apply(attrs.clickOutside);});}};}]);3.clickInside指令，内部点击时触发angular.module('my.directives').directive('clickInside', ['$document', function ($document) { return {restrict: 'A',link: function (scope, element, attrs, ctrl) {$(element).bind('focus click', function (e) {scope.$apply(attrs.clickInside);e.stopPropagation();});}};}]);4.scrollInside 指令，内部滚动时触发angular.module('my.directives').directive('scrollInside', function () {return {link: function (scope, element, attrs, ctrl) {$(element).bind('scroll', function (e) {scope.$apply(attrs.scrollInside);e.stopPropagation();});}};});5. bindKeyBoardEvent指令，内部获得焦点或者点击时触发angular.module('my.directives').directive('bindKeyBoardEvent', function () { return {restrict: 'A',link: function (scope, element, attrs, ctrl) {$(element).bind('focus click', function (e) {scope.$apply(attrs.bindKeyBoardEvent);e.stopPropagation();});}};});6. myDraggable 使元素可拖动angular.module('my.directives').directive('myDraggable', ['$parse', function ($parse) { return {restrict: 'A',link: function (scope, element, attr) {if (attr["modal"] !== undefined) {scope.$watch(attr["modal"], function (newValue) {if (newValue) {setTimeout(function () {$(".modal").draggable({handle: ".modal-header"});}, 100);} else {$(".modal").attr("style", "");}}, true);$(window).resize(function () {$(".modal").attr("style", "");});element.draggable($parse(attr["hrDraggable"])(scope));}}};}]);6.myResizable 使元素可拖拽改变尺寸大小angular.module('my.directives').directive('myResizable', ['$parse', function ($parse) {return {restrict: 'A',link: function (scope, element, attr) {if (attr["modal"] !== undefined) {scope.$watch(attr["modal"], function (newValue) {if (newValue) {setTimeout(function () {$(".modal").resizable({handles: "e, w"});}, 100);}}, true);} else {element.resizable($parse(attr["hrResizable"])(scope));}}};}]);6. conditionFocus 作为一个元素的属性存在：如果监听的表达式值为true，则将焦点放到本元素上。
跟我学AngularJs：AngularJs内置指令大全林炳文Evankaka原创作品。
转载请注明出处/evankaka本教程使用AngularJs版本：1.5.3AngularJs GitHub: https:///angular/angular.js/AngularJs下载地址：摘要：本文主要介绍了AngularJs中自带的指令1、ng-model这个大家都非常熟悉了，就是将表单控件和当前作用域的属性进行绑定。
需要注意绑定的scope的范围（父scope与子scope）。
2、ng-init用得比较少，该指令被调用时会初始化内部作用域。
一般不建议使用此参数。
3、ng-app这个是必需的。
使用该指令自动启动一个AngularJS应用。
ngapp指令指定的应用程序的根元素，通常放置在网页的根元素如body或html 标签。
只有一个AngularJS应用可以自动引导每个HTML文档。
第一ngapp找到该文件将定义自动引导的根元素的应用。
运行多个应用程序在一个HTML文件，您必须手动引导他们使用angular.bootstrap。
AngularJS应用不能互相嵌套。
你可以指定一个AngularJS模块被用于应用程序的根模块。
该模块将被加载到应用程序时，引导到$injector对象中。
它应该包含所需的应用程序代码，或依赖于将包含代码的其他模块的依赖关系。
更多信息见angular.module。
4、ng-controller这个也是经常用到的，用来定义一个控制器。
注意格式5、ng-form用来定义一个from，通常是用来验证参数。
通常可以和以下标签一起使用ng-valid (有效的).ng-invalid （无效的）.ng-pristine （原始，简介）.ng-dirty （脏的）.ng-submitted （提交的）6、ng-disabled像这种只要出现则生效的属性，我们可以在AngularJS中通过表达式返回值true/false令其生效。
Angular.js 中的指令——易懂全解析2016/03/18 1 span >angular.js 中的基本指令包括如下内容：· 1.ng-app/ng-modelng-app 指令用于声明angular,js 的作用范围，ng-model 用于声明模型。
这些在之前都已经进行过详细介绍。
2.ng-init这个指令用于进行模块的初始化，一个最简单的使用方法是利用这个指令进行数据初始化，代码如下：div ng-app= ng-init= cost=5 p 单价：{{ cost }} /p /div 上述代码中，利用ng- init 初始化了cost 变量的，在之后利用{{}}（angular 中的数据绑定方式之一）进行调用。
但是这种数据初始化的方式并不推荐。
3.ng-bind这个指令可以用来进行数据绑定，它的功能就和我们之前提到的{{}}作用相同。
在如下代码中，我们不用{{}}方式，而改用ng-bind 指令进行数据绑定，代码如下：div ng-app= ng-init= cost=5 p 单价：span ng-bind= cost /span /p /div 4.ng- repearng-repeat 指令用于进行反复输出，一般用于对数组的遍历，示例代码如下：div ng-app= ng-init= names=[{name: Jani ,country: Norway },{name: Hege ,country: Sweden },{name: Kai ,country: Denmark }] p 循环对象：/p ul li ng-repeat= xin names {{ + , + x.country }} /li /ul /div 这里对names 内的所有徐对象进行遍历，并分别按照规定的模板进行输出，类于php 中的foreach 语句。
x in names 表示将names 数组中的每一个对象都赋给x，然后输出，没循环一次进行一次这个操作，直到将数组遍历结束。
内置指令所有的内置指令的前缀都为ng，不建议自定义指令使用该前缀，以免冲突。
首先从一些常见的内置指令开始。
先列出一些关键的内置指令，顺便简单说说作用域的问题。
ng-model将表单控件和当前作用域的属性进行绑定，这么解释似乎也不太正确。
但先不要管咬文嚼字，用起来倒是易懂，例如:复制代码代码如下:<inputtype="text" ng-model="someMo del.somePr opert y" /><br>{{someMo del.somePr opert y}}ng-init该指令被调用时会初始化内部作用域。
这个指令一般会出现在比较小的应用中，比如给个de mo什么的...复制代码代码如下:<div ng-init="job='fighte r'">I'm a/an {{job}}</div>除了ng-init，我们还有更多更好的选择。
ng-app每一次用An gular JS都离不开这个指令，顺便说下$rootSc ope。
声明了ng-app的元素会成为$rootSc ope的起点，而$rootSc ope是作用域链的根，通常声明在<html>你懂的。
也就是说根下的作用域都可以访问它。
但是，不建议过度使用$rootSc ope，免得全局变量满天飞，效率又差又难管。
下面是一个例子:复制代码代码如下:<html ng-app="myApp"><body>{{ somePr opert y }}</body><script>var myApp= angula r.module('myApp', []).run(functi on($rootSc ope) {$rootSc ope.somePr opert y = 'hellocomput er';});</script></html>ng-contro ller我们用这个指令在一个D OM元素上装上con troll er。
Angular实现输⼊框中显⽰⽂章标签的实例代码很多⽹站发帖的时候标签输⼊框看起来像是在<input> 元素中直接显⽰标签. ⽐如这种⼀开始以为是把<span> 放在<input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现⽅式, 原来是⽤⼀个 <div> 把 <span>和 <input> 包起来, 然后让 <div> 模仿出输⼊框的样式. 再给 <div> 加上eventListensor, 点击 <div> 时, 使 <input> 获得焦点.在 Angular 中的实现将各个tag⽤ <span> 显⽰, 在同⼀⾏放⼀个 <input> ⽤来输⼊新的标签, 然后⽤⼀个 <div> 将它们包起来<div><span *ngFor="let tag of tags">{{tag}}</span><input type="text"></div>之后给 <div> 加上⼀个事件监听器, 点击 <div> 的时候, 激活 <input> . 为了能够获取 <input> 元素, 使⽤ Angular的 Template reference variables 来命名 <input> .<div (click)="focusTagInput()"><span *ngFor="let tag of tags">{{tag}}</span><input #tagInput type="text"></div>在component中获得 <input> 元素export class EditorComponent {// ⽤ @ViewChild 获得 DOM 元素@ViewChild('tagInput') tagInputRef: ElementRef;focusTagInput(): void {// 让 input 元素获得焦点this.tagInputRef.nativeElement.focus();}}到此基本上整体思路就实现了. 接下来就是完善⼀下细节. ⽐如输⼊完⼀个标签后, 按逗号或者空格⾃动将输⼊的标签添加到前⾯的标签列表中给标签加上⼀个删除按钮当输⼊框是空的时候, 按键盘的退格键可以删除标签列表中最后⼀个标签我们⼀步⼀步来.⾃动将标签加⼊标签列表给 <input> 元素添加⼀个事件监听, 可以监听键盘按下了哪个键. 和键盘按键有关的事件有 keydown , keypress , keyup .根据 MDN 上的解释, keydown 和 keypress 都是在按键按下之后触发, 不同点在于, 所有按键都可以触发 keydown , ⽽keypress 只有按下能产⽣字符的键时才触发, shift , alt 这些按键不会触发 keypress . ⽽且 keypress 从 DOM L3 之后就弃⽤了. keyup 就是松开按键的时候触发.⾸先给 <input> 标签添加事件监听 (这⾥⽤的 keyup , 后⾯会解释为什么不⽤ keydown ).<input #tagInput type="text" (keyup)="onKeyup($event)">component 中对接收到的 KeyboardEvent 进⾏处理onKeyup(event: KeyboardEvent): void {// 这⾥将标签输⼊框作为 FormGroup 中的⼀个 controlconst inputValue: string = this.form.controls.tag.value;// 检查键盘是否按下了逗号或者空格, ⽽且得要求if (event.code === 'Comma' || event.code === 'Space') {this.addTag(inputValue);// 将新输⼊的标签加⼊标签列表后, 把输⼊框清空this.form.controls.tag.setValue('');}}addTag(tag: string): void {// 去掉末尾的逗号或者空格if (tag[tag.length - 1] === ',' || tag[tag.length - 1] === ' ') {tag = tag.slice(0, -1);}// 有可能什么也没输⼊就直接按了逗号或者空格, 如果已经在列表中, 也不添加// 这⾥使⽤了 lodah 的 findif (tag.length > 0 && !find(this.tags, tag)) {this.tags.push(tag);}}使⽤ keyup ⽽不是 keypress 的原因:⼀开始我是⽤的 keypress , 但是 keypress 触发的时候, <input> 还没接收到按键的值, 所以就会出现标签添加到列表, 并且清空输⼊框后, 输⼊框才接收到按下的逗号, 于是刚刚清空的输⼊框中就出现了⼀个逗号.keyup 是在释放按键之后才触发, 此时输⼊框已经接收到按下的逗号的值, 再清空输⼊框的时候就能把逗号⼀起清除掉给标签加上⼀个删除按钮就在每个标签旁边添加⼀个叉号 × , 点击的时候, 把标签从列表中移除就⾏了<div (click)="focusTagInput()"><span *ngFor="let tag of tags">{{tag}}<span (click)="removeTag(tag)">×</span></span><input #tagInput type="text" (keyup)="onKeyup($event)"></div>removeTag(tag: string): void {this.tags.splice(-1);}按下退格键删除最后⼀个标签不需要给DOM添加别的事件监听, 只需要对component中的⽅法稍加修改即可onKeyUp(event: KeyboardEvent): void {const inputValue: string = this.form.controls.tag.value;// 按下退格键, 且输⼊框是空的时候, 删除最后⼀个标签if (event.code === 'Backspace' && !inputValue) {this.removeTag();return;} else {if (event.code === 'Comma' || event.code === 'Space') {this.addTag(inputValue);this.form.controls.tag.setValue('');}}}// 修改参数为可选参数, 当没有参数时, 删除列表中最后⼀个,// 有参数时, 删除传⼊的标签removeTag(tag?: string): void {if (!!tag) {// 这⾥使⽤了 lodash 的 pullpull(this.tags, tag);} else {this.tags.splice(-1);}}接下来就是调整样式了. 就略过了不⾜之处使⽤中⽂输⼊法输⼊完⼀个词按下空格时, 会直接把输⼊的内容加到列表⾥使⽤中⽂输⼊法时, 按下退格键, 如果输⼊框⾥没有别的内容, 会直接删除列表中最后⼀个标签总结以上所述是⼩编给⼤家介绍的Angular 实现输⼊框中显⽰⽂章标签的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
（3条消息）AngularJS内置指令示例AngularJS内置指令示例——表单验证原创 bboyjoe 最后发布于2016-03-01 16:28:50 阅读数 2743 收藏分类专栏： AngularJS版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https:///bboyjoe/article/details/50773453 展开示例1：1.<html ng-app='TestFormModule'>2.<head>3.<meta http-equiv="content-type" content="text/html; charset=utf-8" />4.<script src="framework/angular-1.3.0.14/angular.js"></script>5.<script src="FormBasic.js"></script>6.</head>7.<body>8.<form name="myForm" ng-submit="save()" ng-controller="TestFormModule">9.<input name="userName" type="text" ng-model="erName" required/>10.<input name="password" type="password" ng-model="user.password" required/>11.<input type="submit" ng-disabled="myForm.$invalid"/>12.</form>14.</html>1.var appModule = angular.module('TestFormModule', []);2.appModule.controller("TestFormModule",function($scope){3.$er={erName:'Jason',5.password:''6.};7.$scope.save=function(){8.alert("保存数据!");9.}10.});结果：只有密码有输入，保存框才能可用。
AngularJS最常⽤指令的功能第⼀迭代输出之ng-repeat标签ng-repeat让table ul ol等标签和js⾥的数组完美结合<ul><li ng-repeat="person in persons">{{}} is {{person.age}} years old.</li></ul>你甚⾄可以指定输出的顺序：<li ng-repeat="person in persons | orderBy:'name'">第⼆动态绑定之ng-model标签任何有⽤户输⼊，只要是有值的html标签，都可以动态绑定js中的变量，⽽且是动态绑定。
<input type="text" ng-model='password'>对于绑定的变量，你可以使⽤{{}} 直接引⽤<span>you input password is {{password}}</span>如果你熟悉fiter，你可以很容易的按你的需要格式输出<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>第三绑定点击事件之ng-click事件使⽤ng-click你可以很容易的为⼀个标签绑定点击事件。
<button ng-click="pressMe()"/>当然前提是你要在$scope域中定义的⾃⼰的pressMe⽅法。
和传统的onclick⽅法不同，你甚⾄可以为ng-click⽅法传递⼀个对象，就像这样：<ul><li ng-repeat="person in persons"><button ng-click="printf(person)"/></li></ul>当然还有ng-dblclick标签第四分⽀语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签分⽀语句让你在界⾯上都可以写逻辑判断。
