ANGULARJS中用NG-BIND指令實現單向綁定的例子-PHP开发-PHP中文網

首頁

php教程

PHP开发

ANGULARJS中用NG-BIND指令實現單向綁定的例子

高洛峰

Dec 24, 2016 am 09:54 AM

本文簡單介紹AngularJS框架後，用一個實例示範{{}}插值法和ng-bind指令的使用。

不同於jquery只是一個加強和簡化前端開發的類別庫，angularjs是一個完整web前端框架，所以學習曲線高了很多。

angularjs給我的感覺類似於Java的Spring框架，處於中心容器位置粘合其他組件，其內置的很多組件已經可以滿足一般場景，特殊場景我們可以按照框架思路擴展。

下面從最基礎的內容走起：

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-bind directive</title>
</head>
<body ng-controller="HelloController">
<div>
    <p>直接输出字符串字面值</p>
    Hello {{"World"}}
    <hr>
</div>
<div>
    <p>使用占位符输出变量</p>
    Hello {{greeting}}
    <hr>
</div>
<div>
    <p>使用ng-bind指令输出变量</p>
    Hello <span ng-bind="greeting"></span>
    <hr>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
    function HelloController($scope) {
        $scope.greeting = "World";
    }
</script>
</body>
</html>

登入後複製

ng-app宣告一個angularjs的模組，並限定在聲明html標籤的範圍內。

ng-controller是在模組中聲明一個angularjs的控制器，控制器可以有多個，但上下文是隔離的，應盡可能縮小控制器的作用範圍。

{{}}是angularjs的內插語法，類似JSP的EL表達式${}。第一個輸出因為”World」是個字面值，程式會直接輸出；第二個輸出因為greeting是在控制器裡定義的變數，所以也會輸出變數對應的值，一樣是World；第三個輸出利用了angularjs內建的ng-bind屬性指令，最終結果等價於{{}}，但注意指令=後面是字串，不要寫錯。

js裡面的HelloController和body上面的指令對應，入參$scope是框架提供的一個服務，代表當前控制器的上下文，還有其他類似服務，框架會自動注入，以後慢慢了解。方法體只有一行，是在$scope上定義了一個變量，就是html程式碼裡引用的變數。

這篇很簡單，程式碼複製了就能運作。注意angular.min.js是1.2分支最新的版本，同樣的程式碼用1.3.0版本無法運行，原因未知，可能1.3.0還不是最終Release版本有關。

更多ANGULARJS中用NG-BIND指令實現單向綁定的例子相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn