AngularJS中的內(nèi)置指令-創(chuàng)新互聯(lián)

AngularJS可以把模版編寫成HTML的形式，利用指令來拓展HTML標(biāo)簽，增加聲明式語(yǔ)法來實(shí)現(xiàn)想做的任何事情。AngularJS的內(nèi)置指令包括渲染指令、事件指令和節(jié)點(diǎn)指令。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)青浦,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

渲染指令

ng-bind：

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

   相當(dāng)于：

<p>`something`</p>

ng-bind-template：

   如果用ng-bind-template,則相當(dāng)于：

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

ng-init：

   初始化一個(gè)變量。

<!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>

   在頁(yè)面顯示的是what a hot day。

ng-repeat：

    循環(huán)輸出。

   其中，$index為當(dāng)前循環(huán)到的下標(biāo)，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>

   結(jié)果為：

AngularJS中的內(nèi)置指令

ng-include：

   加載另一個(gè)HTML頁(yè)面。

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

   使用ng-include加載另一頁(yè)面到當(dāng)前頁(yè)面，瀏覽器會(huì)提示錯(cuò)誤。使用ng-include指令的時(shí)候，會(huì)用到AJAX請(qǐng)求XMLHttpRequest。但是我們是直接用瀏覽器打開的當(dāng)前網(wǎng)頁(yè)，并沒有通過web容器訪問，所以存在跨域訪問問題，加載http://www.scut.edu.cn/jw2005/也就失敗了。解決辦法很簡(jiǎn)單：將代碼部署到tomcat等web容器下，通過http訪問即可?；蛘呤褂脀ebstorm，會(huì)自動(dòng)地啟動(dòng)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只要變化就會(huì)重新計(jì)算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>

AngularJS中的內(nèi)置指令

節(jié)點(diǎn)指令

ng-style：

   和HTML的style是一樣的。

ng-class：

    ng-class="{className:expression}" 如果expression為true，則使用className這個(gè)class。

ng-class-odd：

   多用于表格，單數(shù)行的樣式。

ng-class-even：

   多用于表格，偶數(shù)行的樣式。

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，否則會(huì)顯示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="/upload/otherpic6/bdlogo.png';
        });
    </script>
</body>

</html>

ng-href：

   類似ng-src。

ng-if：

    類似ng-show。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：AngularJS中的內(nèi)置指令-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article14/cocdde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站排名、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)