AngularJS 数据->模板->数据->模板

2018-07-26 16:41 更新

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

  • 长度数值保存在变量中
  • 变量显示于某个 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">
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
    $scope.width = 100;
});
angular.bootstrap(document.documentElement, ['app']);
</script>

我们从响应数据变化,但又不使用 change 事件的角度来看,可以这样处理宽度变化:

angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $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">
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
    $scope.style = {width: 100 + 'px'};
});
angular.bootstrap(document.documentElement, ['app']);
</script>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号