angularjs数据绑定对象属性与原始对象

时间:2019-02-04 07:48:44

标签: angularjs

我正在阅读一本有关angularjs的书,在“数据绑定最佳实践”一章中写道,最好是绑定到Object属性,而不是原始对象,但是没有任何关于为什么更好的解释。

我想知道第一个示例的优点

$scope.clock = [];
let updateClock = () => {
    $scope.clock.now = new Date();
    $timeout(() => {
        updateClock();
    }, 1000);
};

和绑定:

{{ clock.now }}

VS。

let updateClock = () => {
    $scope.now = new Date();
    $timeout(() => {
        updateClock();
    }, 1000);
};

和绑定:

{{ now }}

1 个答案:

答案 0 :(得分:0)

与原始对象相比,使用对象属性的基本优势是:

  • 将多个原始属性分组到一个对象中
  • 虽然原始对象将充当solo属性,使其本身成为对象

查看以下对象的多个属性的代码段,其中有两个与一个对象(时钟)相关联的属性(现在为下一个):

angular.module("app", []).controller("ctrl", function($scope, $timeout) {

  $scope.clock = {};
  let updateClock = () => {
    var dt = new Date();
    $scope.clock.now = new Date();
    $scope.clock.next = new Date(dt.setHours(dt.getHours() + 1));
    $timeout(() => {
      updateClock();
    }, 1000);
  };

  updateClock();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">

  <p>Clock Now : {{clock.now}}</p>
  <p>Clock Now + 1 hour : {{clock.next}}</p>
</body>