6.3. 数据->模板->数据->模板


    现在要考虑的是一种在现实中很普遍的一个需求。比如就是我们可以输入数值，来控制一个矩形的长度。在这里，数据与表现的关系是：


    • 长度数值保存在变量中

    • 变量显示于某个 input 中

    • 变量的值即是矩形的长度

    • input 中的值变化时，变量也要变化

    • input 中的值变化时，矩形的长度也要变化


    当然，要实现目的在这里可能就不止一种方案了。按照以前的做法，很自然地会想法，绑定 input 的 change 事件，然后去做一些事就好了。但是，我们前面提到过 ng-model 这个东西，利用它就可以在不手工处理 change 的条件下完成数据的展现需求，在此基础之上，我们还需要做的一点，就是把变化后的数据应用到矩形的长度之上。



    最开始，我们面对的应该是这样一个东西：

    1.   <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 事件的角度来看，可以这样处理宽度变化：

    1.   var TestCtrl = function($scope, $element){
          $scope.width = 100;
          $scope.$watch('width',
            function(to, from){
              $element.children(':first').width(to);
            }
          );
        }


    使用 $watch() 来绑定数据变化。



    当然，这种样式的问题，有更直接有效的手段， ng 的数据绑定总是让人惊异：

    1.   <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>