Angular.js的作用域和數據綁定

初識Angular.js

通過初識Angular.js可以做一個簡單的入門，下面開始做深入的瞭解吧。

作用域

作用域（$scope）和應用的數據模型相關聯的，同時作用域也是表達式執行的上下文。$scope對象是定義應用業務邏輯、控制器方法和視圖屬性的地方。 作用域是視圖和控制器之間的膠水。在應用將視圖渲染並呈獻給用戶之前，視圖中的模板會和作用域進行連接，然後應用會對DOM進行設置以便將屬性變化通知給AngularJS。

基於動態綁定，我們在修改視圖數據時立刻更新$scope，而$scope發生變化時也會立刻渲染視圖。

 

 <script type="text/javascript">

function loadController($scope) {
            $scope.name = "博客園";
            $scope.loadAgain = function () {
                $scope.name = "我的博客";
            };
        };
</script>

 <div ng-app>
        <div ng-controller="loadController">
            <input ng-model='name'/>
            <button ng-click="loadAgain()">
                切換</button>
            <hr />
            &ltspan ng:bind="name"&gt <span ng:bind="name"></span>
            <br />
            &ltspan ng_bind="name"&gt <span ng_bind="name"></span>
            <br />
            &ltspan data-ng-bind="name"&gt <span data-ng-bind="name"></span>
            <br />
            &ltspan x-ng-bind="name"&gt <span x-ng-bind="name"></span>
          </div>
</div>

　　

上面的代碼中，我們給一個 div 元素指定了一個loadController(控制器)，那麼div 元素之內，就是 loadController 這個函數運行時， $scope 這個注入資源的控制範圍。

在這個控制範圍內的html中，可以訪問到$scope的變量：$scope.name，函數$scope.loadAgain。

數據綁定和模板

前面已經講過了，在頁面作用域範圍內可以通過ng-model、ng-bind等之類的指令來綁定變量。

其實還可以使用{{name}}來完成數據綁定。

說說模板吧，模板的綁定有三種：

1.頁面內直接寫html代碼（前面的數據綁定就是了）

2.使用script標籤自定義模板，如下

<script type="text/javascript">
        function tablelist($scope) {
            $scope.userlist = [{ name: "張三", age: "23" }, { name: "李四", age: "25"}]
        };
 </script>

<script type="text/ng-template" id="tpl">
                    <table ng-controller="tablelist">
                        <tr>
                            <th>
                                姓名
                            </th>
                            <th>
                                年齡
                            </th>
                        </tr>
                        <tr ng-repeat="app in userlist">
                            <td>
                                {{app.name}}
                            </td>
                            <td>
                                {{app.age}}
                            </td>
                        </tr>
                     </table>
</script>
  
<div ng-include src="'tpl'"></div>

3.引用外部文件

新建test.html模板頁並清除所有代碼，粘貼如下代碼保存

<table ng-controller="tablelist">
    <tr>
        <th>
            姓名
        </th>
        <th>
            年齡
        </th>
    </tr>
    <tr ng-repeat="app in userlist">
        <td>
            {{app.name}}
        </td>
        <td>
            {{app.age}}
        </td>
    </tr>
</table>

當前頁直接引用test.html，<div ng-include src="'test.html'"></div>

效果都是一樣的：

 

模板引用中用到了 ng-include，還有渲染指令 ng-repeat把對象數組循環渲染到了頁面，ng-repeat還提供了幾個可使用的變量：

     $index 當前索引

     $first 是否爲頭元素

     $middle 是否爲非頭非尾元素

     $last 是否爲尾元素

前段時間項目比較緊，一直沒有更新。現在也正準備換工作了，離開這有些不捨啊。