AngularJS可以把模版编写成HTML的形式,利用指令来拓展HTML标签,增加声明式语法来实现想做的任何事情。AngularJS的内置指令包括渲染指令、事件指令和节点指令。
渲染指令
ng-bind:
<p ng-bind="something"></p>
<p>`something`</p>
ng-bind-template:
如果用ng-bind-template,则相当于:
<p ng-bind-template="`something`"></p>
ng-init:
初始化一个变量。
<!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表示是否为非头非尾元素。
<!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>
结果为:
ng-include:
加载另一个HTML页面。
<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-dbclick,ng-mousedown,ng-mouseup,ng-mouseenter,ng-mouseleave,ng-mousemove,ng-over,ng-submit 这些和JavaScript原生的on-系列指令是类似的。
ng-change:
<!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>
节点指令
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:
<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:
<!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。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。