代码之家 › 专栏 › 技术社区 › Ch3micaL

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

angularjs

Ch3micaL · 技术社区 · 7 年前

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

我想知道第一个例子的优点是什么

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

以及约束力:

{{ clock.now }}

与。

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

以及约束力:

{{ now }}

1 回复 | 直到 7 年前

Sajal 7 年前

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

将多个原始属性分组到一个对象中
而原始对象将作为单独属性使其本身成为对象

下面是一个对象的多个属性的代码片段,其中有两个属性(now,next)与一个对象(clock)关联:

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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前