menu
more_vert
AngularJS 指令

作者:dayu

 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指令使用。

  AngularJSng-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 的预定义类,设置元素的displaynone

  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 指令

原文地址:http://www.cnblogs.com/Judges/p/7221660.html