AngularJS 指令

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 指令的主要内容,如果未能解决你的问题,请参考以下文章

如何创建复制现有指令的可重用 AngularJs 指令

angularJS使用ocLazyLoad实现js延迟加载

AngularJS 指令 DOM 操作不起作用

AngularJS:指令中未绑定的值

这些角度电子邮件指令代码片段如何连接

[AngularJS] AngularJS系列 中级篇之指令