### 6.3. 數據->模板->數據->模板 現在要考慮的是一種在現實中很普遍的一個需求。比如就是我們可以輸入數值，來控制一個矩形的長度。在這里，數據與表現的關系是： - 長度數值保存在變量中 - 變量顯示于某個 input 中 - 變量的值即是矩形的長度 - input 中的值變化時，變量也要變化 - input 中的值變化時，矩形的長度也要變化 當然，要實現目的在這里可能就不止一種方案了。按照以前的做法，很自然地會想法，綁定 _input_ 的 _change_ 事件，然后去做一些事就好了。但是，我們前面提到過 _ng-model_ 這個東西，利用它就可以在不手工處理 _change_ 的條件下完成數據的展現需求，在此基礎之上，我們還需要做的一點，就是把變化后的數據應用到矩形的長度之上。 最開始，我們面對的應該是這樣一個東西： <div ng-controller="TestCtrl"> <div style="width: 100px; height: 10px; background-color: red"></div> <input type="text" name="width" ng-model="width" /> </div> <script type="text/javascript" charset="utf-8"> var TestCtrl = function($scope){ $scope.width = 100; } angular.bootstrap(document.documentElement); </script> 我們從響應數據變化，但又不使用 _change_ 事件的角度來看，可以這樣處理寬度變化： var TestCtrl = function($scope, $element){ $scope.width = 100; $scope.$watch('width', function(to, from){ $element.children(':first').width(to); } ); } 使用 _$watch()_ 來綁定數據變化。 當然，這種樣式的問題，有更直接有效的手段， ng 的數據綁定總是讓人驚異： <div ng-controller="TestCtrl"> <div style="width: 10px; height: 10px; background-color: red" ng-style="style"> </div> <input type="text" name="width" ng-model="style.width" /> </div> <script type="text/javascript" charset="utf-8"> var TestCtrl = function($scope){ $scope.style = {width: 100 + 'px'}; } angular.bootstrap(document.documentElement); </script>