首页 > 代码库 > AngularJS 指令
AngularJS 指令
1、ng-app
ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
所有 AngularJS 应用都必须要要一个根元素。
HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。
2、ng-bind
ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。
如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。
3、ng-bind-html
ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。相当于JS的 innerHTML 属性；
当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 "angular-santize.js" 模块，使用 ngSanitize 函数来检测代码的安全性。
1 <!DOCTYPE html> 2 <html ng-app="myApp" ng-controller="myCtrl"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Angular.js的指令</title> 6 </head> 7 <body> 8 <p ng-bind-html="myText"></p> 9 <script src="js/angular.js"></script> 10 <script src="js/angular-sanitize.js" type="text/javascript" charset="utf-8"></script> 11 <script> 12 var app = angular.module("myApp", [‘ngSanitize‘]); 13 app.controller("myCtrl", function($scope) { 14 $scope.myText = "<h1>p标签里的内容</h1>"; 15 }); 16 /* 17 * 引用 ng-bind-html 样式，必须要引入 angular-sanitize.js； 18 * 且 在 angular.module() 的参数中携带 ‘ngSanitize‘ 19 */ 20 </script> 21 </body> 22 </html>
4、ng-bind-template
ng-bind-template 指令用于告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容。
当你想在 HTML 元素上绑定多个表达式时可以使用 ng-bind-template 指令。
1 <div ng-bind-template="{{firstName}} {{lastName}}"> 2 <!-- 无论是什么值都会被替代 --> 3 </div> 4 <script> 5 var app = angular.module("myApp", []); 6 app.controller("myCtrl", function($scope) { 7 $scope.firstName = "123"; 8 $scope.lastName = "123"; 9 /* 10 * ng-bind-template 是替换 HTML 标签中的 innerHTML; 11 * 可以写入多个值,无需引入其他 js文件 12 */ 13 }); 14 </script>
5、ng-blur（失去焦点）、ng-focus（获得焦点）
ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。
AngularJS 中的 ng-blur 指令不会覆盖原生的 onblur 事件， 如果触发该事件，ng-blur 表达式与原生的 onblur 事件都会执行。
ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。
ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时，ng-focus 表达式与原始的 onfocus 事件将都会执行。
6、ng-change （改变值）
ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。
ng-change 指令需要搭配 ng-model 指令使用。
AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。
ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。
ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。
7、ng-checked（全选）
ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。
如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。
1 <input type="checkbox" ng-model="all"> 选中所有<br><br> 2 <input type="checkbox" ng-checked="all">1 3 <input type="checkbox" ng-checked="all">2 4 <input type="checkbox" ng-checked="all">3
8、ng-class（添加类）
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
ng-class 指令的值可以是字符串，对象，或一个数组。
如果是字符串，多个类名使用空格分隔。
如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。
9、ng-class-even（偶数行）、 ng-class-odd （单行）
用于为 HTML 元素动态的绑定一个或多个 CSS 类。
需要与 ng-repeat 指令搭配使用。
建议用在表格的样式渲染中，但是所有HTML元素都是支持的。
10、ng-click（单击）、ng-dbclick（双击）
ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。
ng-dblclick 指令用于告诉 AngularJS 在鼠标鼠标 HTML 元素时需要执行的操作。
ng-dblclick 指令不会覆盖元素的原始 ondblclick 事件, 鼠标双击时，ng-dblclick 表达式与原始的 ondblclick 事件将都会执行。
ng-mousedown 指令用于告诉 AngularJS 鼠标在指定的 HTML 元素上按下时要执行的操作。
ng-mouseenter 指令用于告诉 AngularJS 鼠标在 HTML 元素穿过时要执行的操作。
ng-mouseleave 指令用于告诉 AngularJS 鼠标从 HTML 元素上移开时要执行的操作。
ng-mousemove 指令用于告诉 AngularJS 鼠标在 HTML 元素上移动时要执行的操作。
ng-mouseover 指令用于告诉 AngularJS 鼠标移动到指定的 HTML 元素上时要执行的操作。
11、ng-cloak
ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生。
<div ng-cloak> </div>
12、ng-controller
ng-controller 指令用于为你的应用添加控制器。
在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。
13、ng-copy（拷贝）、ng-out（剪切事件）、ng-paste（粘贴）
ng-copy 指令用于告诉 AngularJS 在 HTML 元素文本被拷贝时要执行的操作。
ng-copy 指令不会覆盖元素的原始 oncopy 事件, 事件触发时，ng-copy 表达式与原始的 oncopy 事件将都会执行。
ng-paste 指令用于告诉 AngularJS 文本在 HTML 元素上粘贴时需要执行的操作。
14、ng-disabled
ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
15、ng-hide（隐藏）、ng-show（显示）
ng-hide 指令在表达式为 true 时隐藏 HTML 元素。
ng-hide 是 AngularJS 的预定义类，设置元素的 display 为 none。
ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。
16、ng-href（链接）
ng-href 指令覆盖了原生的 <a> 元素 href 属性。
如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。
ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。
17、ng-if、ng-repeat（for循环）（*****）
ng-if 指令用于在表达式为 false 时移除 HTML 元素。
如果 if 语句执行的结果为 true，会添加移除元素，并显示。
ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。
ng-repeat 指令用于循环输出指定次数的 HTML 元素。
18、ng-init（*****）
ng-init 指令执行给定的表达式。
ng-init 指令添加一些不必要的逻辑到 scope 中，
19、ng-keydown
ng-keydown 指令用于告诉 AngularJS 在指定 HTML 元素上按下按键时需要的操作。
ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，ng-keydown 表达式与原生的 onkeydown 事件将都会执行。
Keydown（按下键触发） Keypress（数字键） Keyup （弹起时触发）
20、ng-model（*****）
ng-model 指令绑定了 HTML 表单元素到 scope 变量中。
如果 scope 中不存在变量, 将会创建它。
ng-model-options 指令绑定了 HTML 表单元素到 scope 变量中；
21、ng-non-bindable
指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。
<p ng-non-bindable>{{ 5+5 }}</p> <!-- 描述：结果为 ：{{ 5+5 }} -->
22、ng-readonly （只读）
ng-readonly 指令用于设置表单域(input 或 textarea) 的 readonly 属性。
如果 ng-readonly 属性的表达式返回 true 则表单域为只读。
23、ng-src 指令覆盖了 <img> 元素的 src 属性。
24、ng-style 指令为 HTML 元素添加 style 属性。
25、ng-value 指令用于设置 input 或 select 元素的 value 属性。
26、ng-submit 指令用于在表单提交后执行指定函数。
27、ng-switch 指令根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。
你可以通过使用 ng-switch-default—" "指令设置默认选项，如果都没有匹配的情况，默认选项会显示
AngularJS 指令