AngularJS中的内置指令

简介:

       AngularJS可以把模版编写成HTML的形式,利用指令来拓展HTML标签,增加声明式语法来实现想做的任何事情。AngularJS的内置指令包括渲染指令、事件指令和节点指令。


渲染指令

ng-bind

1
< p  ng-bind = "something" ></ p >

      相当于:

1
< p >`something`</ p >


ng-bind-template:

      如果用ng-bind-template,则相当于:

1
< p  ng-bind-template = "`something`" ></ p >


ng-init:

     初始化一个变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body  ng-app = "app" >
     < div  ng-controller = "Controller1"  ng-init = "something='what a hot day!'" >
         < p >`something`</ p >
     </ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', [])
         .controller('Controller1', ['$scope', function(parm) {
             parm.something = 'hello world';
         }]);
     </ script >
</ body >
 
</ html >

      在页面显示的是what a hot day。


ng-repeat:

      循环输出。

      其中,$index为当前循环到的下标,boolean值$first表示是否为头元素,boolean值$last表示是否为尾元素,boolean值$middle表示是否为非头非尾元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body  ng-app = "app" >
     < div  ng-controller = "Controller1"  ng-init = "array = ['one','two','three','four']" >
         < ul  ng-repeat = "item in array" >
             < li >index:{{$index}}</ li >
             < li >isFirst?{{$first}}</ li >
             < li >isMiddle?{{$middle}}</ li >
             < li >isLast?{{$last}}</ li >
         </ ul >
     </ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', [])
         .controller('Controller1', function($scope) {});
     </ script >
</ body >
 
</ html >

     结果为:

wKioL1WSM-OwpInWAADAfUkEaiA924.jpg

ng-include:

     加载另一个HTML页面。

1
< div  ng-include = "'http://www.scut.edu.cn/jw2005/'" ></ div >

     使用ng-include加载另一页面到当前页面,浏览器会提示错误。使用ng-include指令的时候,会用到AJAX请求XMLHttpRequest。但是我们是直接用浏览器打开的当前网页,并没有通过web容器访问,所以存在跨域访问问题,加载http://www.scut.edu.cn/jw2005/也就失败了。解决办法很简单:将代码部署到tomcat等web容器下,通过http访问即可。或者使用webstorm,会自动地启动web容器。

    

事件指令

ng-click,ng-dbclickng-mousedown,ng-mouseup,ng-mouseenter,ng-mouseleave,ng-mousemove,ng-over,ng-submit 这些和JavaScript原生的on-系列指令是类似的。


ng-change:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body  ng-app = "app" >
     < div  ng-controller = "Controller1" >
         <!-- input只要变化就会重新计算anything -->
         < input  type = "text"  ng-model = "something"  ng-change = "anything = something*2"  />
         < p >`anything`</ p >
     </ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', [])
         .controller('Controller1', function() {});
     </ script >
</ body >
 
</ html >

wKiom1WSUErgHEpZAAA32j9KA4I322.jpg


节点指令

ng-style:

      和HTML的style是一样的。


ng-class:

      ng-class="{className:expression}" 如果expression为true,则使用className这个class。


ng-class-odd:

      用于表格,单数行的样式。


ng-class-even:

      用于表格,偶数行的样式。


ng-show:

      ng-show="expression"如果expression为true,则显示。


ng-hide:

      ng-hide="expression"如果expression为true,则隐藏。


ng-switch:

1
2
3
4
< ul  ng-switch  on = "expression" >
     < li  ng-switch-when = "true" >good</ li >
     < li  ng-switch-when = "false" >bad</ li >
</ ul >

      如果expression为true,显示good,否则会显示bad。


ng-src:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body  ng-app = "app" >
     < div  ng-controller = "Controller1" >
         < img  ng-src = "`src`" >
     </ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', [])
         .controller('Controller1', function($scope) {
             $scope.src = 'https://www.baidu.com/img/bdlogo.png';
         });
     </ script >
</ body >
 
</ html >


ng-href:

      类似ng-src。


ng-if:

      类似ng-show。










本文转自 iampomelo 51CTO博客,原文链接:http://blog.51cto.com/iampomelo/1669460,如需转载请自行联系原作者
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
10月前
|
移动开发 前端开发 JavaScript
AngularJS 技术深入解析
AngularJS 是一个流行的 JavaScript 框架,用于构建动态的单页面应用程序(SPA)。它提供了一种优雅而强大的方式来开发前端应用,具有出色的数据绑定、模块化和可扩展性等特性。本文将深入探讨 AngularJS 的一些关键技术。
80 0
|
JavaScript 内存技术
angularJS 常用指令小结
angularJS 常用指令小结
129 0
|
JavaScript
AngularJs错误
AngularJs错误
72 0
|
JavaScript 前端开发
|
JavaScript 前端开发 移动开发
|
索引 图形学
|
Web App开发 JavaScript 前端开发