AngularJS中的內置指令

時間 2020-05-24

原文原文鏈接

AngularJS能夠把模版編寫成HTML的形式，利用指令來拓展HTML標籤，增長聲明式語法來實現想作的任何事情。AngularJS的內置指令包括渲染指令、事件指令和節點指令。javascript

渲染指令css

ng-bind：html

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

至關於：java

<p>`something`</p>

ng-bind-template：web

若是用ng-bind-template,則至關於：express

<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。tomcat

ng-repeat：app

循環輸出。

其中，$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。