了解 Angular 数据绑定

Question

在阅读有关 Angular 数据绑定的信息时 - 遇到了一些建议 -

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

来源：ng-book

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

这是伴随着代码sn-p。

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. 如果我从$timeout 之外删除此行$scope.clock.now = new Date(); - 它不起作用。尽管clock.now 被分配了$timeout 中的日期对象。为什么？

Answer 1

第一季度：

• 它与可读性、this 和范围上下文有关
• {{this.now}} 与 {{clock.now}}
• 作用域上的数据绑定可能不会触发摘要循环
• 但即便如此，使用 $scope 也不能完全解决调试问题和可读性问题

第二季度：

• 可能是因为它需要重新渲染，或者还没有完成摘要循环
• 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?

这里是三个例子，我更喜欢Controller1的语法，它使imo调试更容易：

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();
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body data-ng-app="app">
<div data-ng-controller="Controller1 as vm">
    <h6>vm.clock.now {{vm.clock.now}} vm.now {{vm.now}}</h6>
    <h6>vm: {{vm}}</h6>
</div>

<div data-ng-controller="Controller2">
    <h6>$scope.clock.now {{clock.now}} $scope.now {{this.now}}</h6>
    <h6>this is confusing {{this}}</h6>
</div>  
<div data-ng-controller="Controller3 as vm">
    <h1>{{vm.clock.now}}</h1>
    <h6>nice scope: {{vm}}</h6>
</div>

</body>

另见：

• What's the difference between ng-model and ng-bind
• AngularJS : Why ng-bind is better than {{}} in angular?

Answer 2

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

• 分配给空对象
• 然后附加 now 属性
• 然后再次分配给空对象

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

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

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