不朽情缘滴血怎么算分

書名： AngularJS入門與進(jìn)階
作者名：江榮波
本章字?jǐn)?shù)： 385字
更新時(shí)間： 2020-11-28 23:44:29

2.3 ng-bind指令

ng-bind指令是和數(shù)據(jù)綁定相關(guān)的另一個(gè)指令，其作用是實(shí)現(xiàn)作用域到視圖的單向數(shù)據(jù)綁定，和表達(dá)式功能類似，可用于向界面中輸出作用域中的數(shù)據(jù)，例如2.2節(jié)案例中輸出uname屬性的表達(dá)式：

        <div>{{uname}}</div>

可以替換為：

        <div ng-bind="uname"></div>

或者

        <div class="ng-bind:uname"></div>

不同的是，在使用AngularJS表達(dá)式{{name}}時(shí)，如果遇到網(wǎng)絡(luò)問題，就會(huì)導(dǎo)致AngularJS加載緩慢，我們會(huì)看到瀏覽器直接把AngularJS表達(dá)式當(dāng)作字符串渲染到頁面中，這樣用戶體驗(yàn)將不是很好，所以推薦使用ng-bind指令。ng-bind指令在AngularJS沒有加載完畢的時(shí)候是不會(huì)解析執(zhí)行的，只有AngularJS加載完畢才會(huì)執(zhí)行。

window.alert()方法會(huì)中斷JavaScript代碼的執(zhí)行，可以通過alert()方法模擬網(wǎng)絡(luò)加載延遲的情況，例如：

代碼清單：ch02\ch02_04.html

        <!doctype html>
        <html ng-app>
        <head>
            <meta charset="UTF-8">
            <title>ch02_04</title>
            <script type="text/javascript" src="../angular-1.3.0.14/angular.js">
            </script>
        </head>
        <body >
            <div>用戶名：<input type="text" ng-model="uname" /></div>
            <div ng-bind="uname"></div>
            <script type="text/javascript">
                alert（"pause"）;
            </script>
        </body>
        </html>

我們可以在瀏覽器中運(yùn)行ch02_04.html頁面（見圖2.3），未經(jīng)過AngularJS框架解析的表達(dá)式內(nèi)容直接輸出到了頁面中。

圖2.3 AngularJS表達(dá)式作為字符串渲染到頁面示例

相比之下，使用ng-bind指令則不會(huì)出現(xiàn)這種現(xiàn)象，但是當(dāng)我們需要進(jìn)行運(yùn)算處理或者使用過濾器對(duì)輸出內(nèi)容進(jìn)行處理時(shí)，則必須使用表達(dá)式。

官术网_书友最值得收藏!

AngularJS入門與進(jìn)階

2.3 ng-bind指令