AngularJS的指令和表達(dá)式是什么

AngularJS的指令和表達(dá)式是什么，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

成都創(chuàng)新互聯(lián)專注于滁州企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),電子商務(wù)商城網(wǎng)站建設(shè)。滁州網(wǎng)站建設(shè)公司,為滁州等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

 指令屬性

目前為止，我們已提到過(guò)幾次“指令屬性”的概念，但從未深入探討過(guò)它到底是什么。實(shí)際上，“指令屬性”就是綁定在DOM元素上的函數(shù)，它可以調(diào)用方法、定義行為、綁定controller及$scope對(duì)象、操作DOM，等等等等。

當(dāng)瀏覽器啟動(dòng)、開(kāi)始解析HTML（像平時(shí)一樣）時(shí)，DOM元素上的指令屬性就會(huì)跟其他屬性一樣被解析。

當(dāng)一個(gè)Angular.js應(yīng)用啟動(dòng)，Angular編譯器就會(huì)遍歷DOM樹(shù)（從有ng-app指令屬性的那個(gè)DOM元素開(kāi)始，如我們?cè)诒鞠盗?**篇里所提過(guò)的），解析HTML，尋找這些指令屬性函數(shù)。

當(dāng)在一個(gè)DOM元素上找到一個(gè)或多個(gè)這樣的指令屬性函數(shù)，它們就會(huì)被收集起來(lái)、排序，然后按照優(yōu)先級(jí)順序被執(zhí)行。

每個(gè)指令屬性都有自己的優(yōu)先級(jí)，在我們關(guān)于指令屬性的專題文章里（http://www.ng-newsletter.com/posts/directives.html），你可以找到更深入的信息。

Angular.js應(yīng)用的動(dòng)態(tài)性和響應(yīng)能力，都要?dú)w功于指令屬性。之前我們已經(jīng)看過(guò)一些指令屬性的用例：

ng-model

input ng-model="name" name="Name" placeholder="Enter your name"/> <h5>Your name: {{ name }}</h5>

試試看 

ng-model指令屬性（我們?cè)谥暗恼鹿?jié)使用過(guò)它），被用來(lái)將DOM文本輸入框的值，跟controller里的$scope model綁定起來(lái)。具體的實(shí)現(xiàn)過(guò)程，是在這個(gè)值上綁定了一個(gè)$watch函數(shù)（類似JavaScript里的事件監(jiān)聽(tīng)函數(shù)）。

$watch函數(shù)（在使用時(shí)）運(yùn)行在Angular.js的事件循環(huán)（即$digest循環(huán)）里，讓Angular.js能夠?qū)OM進(jìn)行相應(yīng)的更新。請(qǐng)關(guān)注我們關(guān)于$digest循環(huán)的高級(jí)文章！

在Angular.js應(yīng)用的開(kāi)發(fā)中，我們用指令屬性來(lái)將行為綁定到DOM上。指令屬性的使用，是一個(gè) 應(yīng)用能否擁有動(dòng)態(tài)性、響應(yīng)能力的關(guān)鍵。Angular.js提供了很多缺省的指令屬性，現(xiàn)在讓我們來(lái)看看其中幾個(gè)，以及如何使用它們。

幾個(gè)常見(jiàn)的指令屬性

{{ 表達(dá)式 }}

這個(gè)雙大括號(hào)指令屬性，使用$watch()函數(shù)，給括號(hào)內(nèi)的表達(dá)式注冊(cè)了一個(gè)監(jiān)聽(tīng)器。正是這個(gè)$watch函數(shù)，讓Angular.js能夠?qū)崟r(shí)自動(dòng)更新view。

那么，到底什么算是個(gè)表達(dá)式？

表達(dá)式

要想理解指令屬性的運(yùn)作，我們必須先理解表達(dá)式，所以這里我們就繞個(gè)路。在之前的例子里我們已經(jīng)見(jiàn)過(guò)表達(dá)式，例如 {{ person.name }} 和 {{ clock }}。

表達(dá)式粗略來(lái)看有點(diǎn)像 eval(javascript) 的結(jié)果。它們會(huì)經(jīng)過(guò)Angular.js的處理，從而擁有以下重要而獨(dú)特的性質(zhì)：

• 所有表達(dá)式都在scope這個(gè)context里被執(zhí)行，因此可以使用所有本地 $scope 中的變量。

• 如果一個(gè)表達(dá)式的執(zhí)行導(dǎo)致類型錯(cuò)誤或引用錯(cuò)誤，這些錯(cuò)誤將不會(huì)被拋出。

• 表達(dá)式里不允許任何控制函數(shù)流程的功能（如if/else等條件語(yǔ)句）

• 表達(dá)式可接受一個(gè)或多個(gè)串聯(lián)起來(lái)的過(guò)濾器。

試試看 

試試輸入“person“,“clock“或其他數(shù)學(xué)算式如2+4。你甚至可以操作scope，例如，試試輸入person.name = ”Ari”; person.age = 28; person 或 clock

表達(dá)式都運(yùn)行在調(diào)用它們的scope里，所以一個(gè)表達(dá)式可訪問(wèn)并操作其scope上的一切。由此，你可以使用表達(dá)式遍歷其scope的屬性（我們?cè)趎g-repeat中會(huì)看到這一應(yīng)用）、調(diào)用scope里的函數(shù)，或者對(duì)scope中的變量進(jìn)行數(shù)學(xué)運(yùn)算。

現(xiàn)在，讓我們回到指令屬性…

ng-init

ng-init指令屬性是一個(gè)在啟動(dòng)時(shí)運(yùn)行的函數(shù)（在程序進(jìn)入運(yùn)行階段之前）。它讓我們能夠在程序運(yùn)行前設(shè)定初始變量的值：

<b ng-init='name = "Ari Lerner"'>Hello, {{ name }}</b>

試試看 

ng-click

ng-click指令屬性給DOM元素注冊(cè)了一個(gè)點(diǎn)擊事件的監(jiān)聽(tīng)器。當(dāng)此DOM元素上有點(diǎn)擊事件發(fā)生（即當(dāng)此button或link被點(diǎn)擊時(shí)），Angular.js就會(huì)執(zhí)行表達(dá)式的內(nèi)容，并相應(yīng)地更新view。

<button ng-click="counter = counter + 1">Add one</button> Current counter: {{ counter }}

試試看

我們也可以用ng-click 來(lái)調(diào)用在controller里寫(xiě)好并綁定在$scope上的函數(shù)，例如：

<button ng-click="sayHello()">Say hello</button>

controller 里的函數(shù):

app.controller('MyController', function($scope) {    $scope.sayHello = function() {      alert("hello!");    }  });

試試看

ng-show / ng-hide

The ng-show and ng-hide directives show or hide a portion of the DOM depending on whether the expression is truthy.

ng-show和ng-hide指令，根據(jù)賦予它們的表達(dá)式的值的真假性(truthy)，來(lái)顯示和隱藏它們所屬的那一部分DOM。

我們?cè)谶@里不會(huì)深入，但你應(yīng)該熟悉JavaScript中變量值的“truthy”和“falsy”概念。

<button ng-init="shouldShow = true" ng-click="shouldShow = !shouldShow">Flip the shouldShow variable</button>  <div ng-show="shouldShow">    <h4>Showing {{ shouldShow }}</h4>  </div> <div ng-hide="shouldShow">    <h4>Hiding {{ shouldShow }}</h4>  </div>

試試看

圖6

ng-repeat

ng-repeat指令遍歷一個(gè)數(shù)據(jù)集合中的每個(gè)數(shù)據(jù)元素，加載HTML模版把數(shù)據(jù)渲染出來(lái)。被重復(fù)使用的模版元素，就是我們綁定了這個(gè)指令屬性的DOM元素。每一個(gè)使用模版渲染的DOM元素都有自己的scope。

在更多的解釋之前，我們先看一個(gè)例子。假設(shè)我們的controller里有這樣一個(gè)數(shù)據(jù)元素的數(shù)組：

$scope.roommates = [    { name: 'Ari'},    { name: 'Q'},    { name: 'Sean'},    { name: 'Anand'}  ];

在view里我們可以用ng-repeat來(lái)遍歷這個(gè)集合里的數(shù)據(jù)：

<ul>    <li ng-repeat="person in roommates">{{ person.name }}</li> </ul>

請(qǐng)看

• Ari

• Q

• Sean

• Anand

對(duì)賦予ng-repeat的表達(dá)式稍作改動(dòng)，我們還可以用它遍歷一個(gè)由成對(duì)的key-value數(shù)據(jù)組成的集合。例如，假設(shè)我們有一個(gè)人名和他們最喜歡的顏色的數(shù)據(jù)集合：

請(qǐng)看      Ari     Q     Sean     Anand

要遍歷它，我們可以給ng-repeat指令屬性賦予這個(gè)表達(dá)式：(key, value) in object：

<ul>    <li ng-repeat="(name, color) in people">{{ name }}'s favorite color is {{ color }}    </li>  </ul>

請(qǐng)看

• Ari’s favorite color is orange

• Q’s favorite color is blue

• Sean’s favorite color is green

Angular.js提供的直接可用的指令屬性并不多，但它讓我們可以很容易地創(chuàng)建自己的指令屬性。請(qǐng)到這里查看我們的指令屬性創(chuàng)建指南：http://www.ng-newsletter.com/posts/directives.html

我們應(yīng)用中的指令屬性

在上一篇中，我們的收音機(jī)應(yīng)用只從NPR API取回了***的音頻節(jié)目列表：

$scope.programs = data.list.story;

現(xiàn)在我們學(xué)了遍歷一個(gè)list的實(shí)現(xiàn)方法，可以在我們的收音機(jī)應(yīng)用里，像剛才那樣用ng-repeat來(lái)遍歷這個(gè)節(jié)目列表了：

<ul id="programs_list" class="">    <li ng-repeat="program in programs">      <span class="large-12">{{ program.title.$text }}</span>    </li> </ul>

NPR API給我們的是一個(gè)有title+$text的列表，這個(gè)結(jié)構(gòu)是NPR API所特有的，而不是Angular.js的。

現(xiàn)在我們列出了節(jié)目和它們的標(biāo)題，但還不能點(diǎn)擊并播放它們。用ng-click我們可以給HTML元素加上一個(gè)點(diǎn)擊功能：

<ul id="programs_list" class="">    <li ng-repeat="program in programs" ng-click="play(program)">      <span class="large-12">{{ program.title.$text }}</span>    </li> </ul>

通過(guò)這一步，我們把一個(gè)play動(dòng)作函數(shù)綁定到了列表里的<li>DOM元素上。現(xiàn)在，我們?cè)赑layerController里創(chuàng)建這個(gè)play動(dòng)作函數(shù)，然后我們就有了一個(gè)功能完備的音頻應(yīng)用：

// format.mp4.$text是NPR API給我們的到這個(gè)音頻mp4文件的路徑 $scope.play = function(program) {    if ($scope.playing) audio.pause();    var url = program.audio[0].format.mp4.$text;    audio.src = url;    audio.play();    // 儲(chǔ)存播放器的狀態(tài)為正在播放    $scope.playing = true; }

現(xiàn)在這個(gè)應(yīng)用功能完備了，但是還不太好看。而且隨著我們繼續(xù)添加新功能，代碼也會(huì)膨脹，變得難以管理。我們可以創(chuàng)建自己的指令屬性，來(lái)幫助我們減少?gòu)?fù)雜性。

想更多地學(xué)習(xí)自定義指令屬性，可以看看我們深入探討指令屬性的文章：http://www.ng-newsletter.com/posts/directives.html

創(chuàng)建自定義指令屬性，我們使用app對(duì)象的directive方法：

app.directive('nprLink', function() {    return {      restrict: 'EA',      require: ['^ngModel'],      replace: true,      scope: {        ngModel: '=',        play: '&'      },      templateUrl: '/views/nprListItem.html',      link: function(scope, ele, attr) {        scopescope.duration = scope.ngModel.audio[0].duration.$text;      }    } });

我們不會(huì)逐個(gè)解釋每個(gè)選項(xiàng)的意義，因?yàn)槲覀冇幸黄獙ｉT(mén)的深入文章來(lái)介紹它們（http://www.ng-newsletter.com /posts/directives.html）。這里我們只需要明白，現(xiàn)在我們就能在HTML里使用這個(gè)自定義的指令屬性了，它會(huì)將它所在的DOM元素 替換為我們給定的templateUrl所指向的模版里的內(nèi)容（在 /views/nprListItem 中）。

現(xiàn)在，我們的主HTML文件可以保持整潔，而將用來(lái)渲染列表內(nèi)容的view，創(chuàng)建在這個(gè)單獨(dú)提取出來(lái)的模版文件里：

<div class="nprLink row" ng-click="play(ngModel)">    <span class="name large-8 columns">      <button class="large-2 small-2 playButton columns"><div class="triangle"></div></button>      <div class="large-10 small-10 columns">        <div class="row">          <span class="large-12">{{ ngModel.title.$text }}</span>        </div>        <div class="row">          <div class="small-1 columns"></div>          <div class="small-2 columns push-8"><a href="{{ ngModel.link[0].$text }}">Link</a></div>        </div>      </div>    </span>  </div>

注意我們?cè)谀０嫖募镉胣gModel來(lái)指向之前的program數(shù)據(jù)，因?yàn)樵趧?chuàng)建自定義指令屬性時(shí)，我們做了設(shè)置。

現(xiàn)在，我們?cè)谥鱄TML文件里就不用再寫(xiě)上面那么多HTML，而只要簡(jiǎn)單地?fù)Q上我們的自定義指令屬性npr-link：

<ul id="programs_list" class="">    <li ng-repeat="program in programs">      <span npr-link play='play(program)' ng-model="program"></span>    </li> </ul>

要將這個(gè)代碼庫(kù)保存到本地，請(qǐng)先確保安裝了git，clone此代碼庫(kù)，然后check out其中的part5分支。我們使用XHR獲取模版，所以你需要在本地服務(wù)器上運(yùn)行這一章的代碼。在part5分支里我們提供了服務(wù)器端代碼：

git clone https://github.com/auser/ng-newsletter-beginner-series.git git checkout -b part5 ./bin/server.sh

關(guān)于AngularJS的指令和表達(dá)式是什么問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享文章：AngularJS的指令和表達(dá)式是什么
URL網(wǎng)址：http://muchs.cn/article24/pihece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、企業(yè)建站、網(wǎng)站收錄、域名注冊(cè)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)