Angular使用筆記3_AngularJS(Angular1.x)_雙向綁定(ng-model)、單向綁定(ng-bind)

 

資料繫結(Data Binding)

是 AngularJS 框架在視圖（DOM 元素）與作用域之間建立的資料同步機制。

所謂「雙向綁定」，是指UI的操作能夠即時同步到作用域中，反之作用域中的資料修改也能夠即時回顯到介面中。作用域可以被視為一個容器，裡面有一些基於 key-value 的資料。

Data Binding in Classical Template Systems

大多數Template系統只會採用One-way Data Binding：將Template與模型元件合併成View。

合併完成後，Model或VIew相關區塊的變更都不會自動反映在檢視中。

更糟的是，使用者對檢視所做的任何變更，也不會反映在模型中。

換言之，開發人員必須撰寫程式碼，不斷同步檢視與模型，以及模型與檢視。

Data Binding in Angular Templates

Angular Template則採用不同運作方式。

• 首先，範本（未經編譯的 HTML，以及任何額外的標記或指令）會在瀏覽器中編譯。
• 編譯步驟會產生即時檢視。檢視中的任何變更都會立即反映至模型，而模型中的任何變更也會傳遞至檢視。
• Model是應用程式狀態的唯一源頭，大幅簡化了開發者的程式設計模型。

As If

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AngularJs練習2-1</title>
</head>
<body>
    <div>用戶名：<input type="text" name="uname" id="uname" /></div>
    <div><span id="info"></span></div>
    <script type="text/javascript">
        var uname = document.getElementById("uname");
        var info = document.getElementById("info");
        uname.onkeyup = function(){
                    info.innerHTML = uname.value;
        }
    </script>
</body>
</html>

執行效果如下:

可觀察到頁面顯示內容會隨著用戶key-in的內容而跟著即時改變。

To Be (藉由AngularJs的雙向數據綁定機制) 

程式練習1.ng-model

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AngularJs練習2-1</title>
    <script type="text/javascript" src="./angular-1.6.4/angular.min.js" ></script>
</head>
<body>
    <div>用户名2:<input type="text" ng-model="uname" /></div>
    <div>{{uname}}</div>
</body>
</html>

執行效果如下

可發覺幾乎連半行javascript都沒有寫，也有異曲同工之妙。

• 作用域可理解為，背後有一個類似var $rootScope = {uname:'xxxx'}的js物件
• 當我們將ng-model指令作為html屬性附加在input標籤中，此時AngularJs會於$rootScope作用域中添加一個uname屬性來和input輸入框元素綁定。
• 而當用戶在輸入框編修內容輸入時，AngularJs會自動即時把內容同步到作用域的uname屬性中，所以直接省略keyup事件處理。

程式練習2.ng-bind

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AngularJs練習2-2</title>
    <script type="text/javascript" src="./angular-1.6.4/angular.min.js" ></script>
</head>
<body>
    <div>用户名:<input type="text" ng-model="uname" /></div>
    <div>{{uname}}</div> <!--此寫法若遇到網路問題，會造成加載緩慢。-->
    <!--底下寫法則是ng-bind指令的兩種寫法，在AngularJS尚未加載完畢時，不會解析執行。-->
    <div ng-bind="uname"></div>
    <div class="ng-bind:uname"></div>

    <script type="text/javascript">
        alert("pause");
    </script>
</body>
</html>

ng-bind指令其實跟雙花括號插值表達式的功能類似，能用於向UI輸出作用域中的資料。

執行效果如下

上面三種語法，它們最大的差異是，當 AngularJS 尚未完成編譯時，{{ }} 可能暴露未解析的原始運算式，而 ng-bind 的兩個寫法則不會。

程式練習3.ng-model

數值連動計算價格

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AngularJs練習2-3</title>
    <script type="text/javascript" src="./angular-1.6.4/angular.min.js" ></script>
</head>
<body ng-init="price=10; num=1">
    <div>UnitPrice:<input type="number" ng-model="price" /></div><br/>
    <div>Quntaty:<input type="number" ng-model="num" /></div><br/>
    <div>TotalPrice:{{price * num}}</div>
</body>
</html>

執行效果如下

Ref:

https://code.angularjs.org/1.6.4/docs/guide/databinding