溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
