Question

在阅读Angular数据绑定时 - 遇到了建议 -

“由于JavaScript本身的性质以及它如何通过价值与参考，它被认为是Angular中绑定的最佳实践通过对象的属性引用视图，而不是原始对象本身。“

来源：ng-book

问题： 1.它是什么意思 - 绑定引用而不是对象？

这附有代码段。

JS代码：

var module = angular.module("app", []);
//controller uses $timeout
module.controller("MyController", function ($scope, $timeout) {
    var updateClock = function () {
        $scope.clock = {};
        $scope.clock.now = new Date();
        $timeout(function () {
            $scope.clock.now = new Date();
            updateClock();
        }, 1000);
    };
    updateClock();
})

HTML：

<body data-ng-app="app">
<div data-ng-controller="MyController">
    <h5>Hello {{clock.now}}</h5>
</div>
</body>

问题： 2.如果我从$scope.clock.now = new Date();外部删除此行$timeout - 它不起作用。虽然clock.now中正在为$timeout分配日期对象。为什么呢？

Answer 1

Q1：

它有一些与可读性以及select SW_lat, SW_lon, NE_lat, NE_lon, zone from tbl_zones where zone='west' OR zone='north和范围上下文
this vs {{this.now}}
对范围的数据绑定可能不会触发摘要周期
但即便如此，使用$ scope也无法解决调试问题和完全可读性

Q2：

可能是因为它需要重新渲染，或者还没有完成摘要周期
Anyway to trigger a method when Angular is done adding scope updates to the DOM?
Angular $scope.$apply vs $timeout as a safe $apply
AngularJS : $evalAsync vs $timeout
How do I use $scope.$watch and $scope.$apply in AngularJS?

以下是三个示例，我更喜欢{{clock.now}}的语法，它使调试变得更容易：

Controller1

var module = angular.module("app", []);
module.controller("Controller1", function ($timeout) {
        var vm = this
        vm.clock = {now: 'its loading'};
        vm.now = new Date();
        var updateClock = function () {
            $timeout(function () {
                vm.clock.now = new Date();
                updateClock();
            }, 3000);
        };
        updateClock();
    })

module.controller("Controller2", function ($scope, $timeout) {
        $scope.clock = {now: 'its loading'};
        $scope.now = new Date();
        var updateClock = function () {
            $timeout(function () {
                $scope.clock.now = new Date();
                updateClock();
            }, 3000);
        };
        updateClock();
    })

module.controller("Controller3", function ($timeout) {
        var vm = this
        var updateClock = function () {
            $timeout(function () {
                try {
                  vm.clock.now = new Date();
                } catch(e){
                  vm.clock = {}
                  vm.clock.now = 'oops'
                }
                updateClock();
            }, 3000);
        };
        updateClock();
    })

另见：

Answer 2

关于问题2：基本上如果你删除$ scope.clock.now = new Date（）;来自$ timeout回调之外的指令，在$ timeout服务触发的两个摘要周期之间，$ scope.clock实际上是

分配给空对象
然后附加了现在的属性
然后再次分配给空对象

因此$ scope.clock.now变量在摘要时始终未定义。

从Updateclock函数执行开始到$ timeout service触发的摘要周期的详细执行步骤：

$ scope.clock被赋予空对象
设置了计时器
Updateclock功能完成
计时器到期，我们进入超时回调函数，其中：
- $ scope.clock.now被分配了新的Date（）;
- 递归调用updateClock（）
  - $ scope.clock再次分配空对象
  - 设置了新的计时器
  - updateClock完成
- 回调函数完成
此时$ timeout服务触发摘要
$ scope.clock.now未定义 - 就像它开始之前一样，就像它将在下一个摘要周期一样

了解Angular数据绑定

2 个答案: