AngularJS 监视工厂对象的属性 - 意外行为答案

【问题标题】：AngularJS watching property of factory objects - unexpected behaviorAngularJS 监视工厂对象的属性 - 意外行为
【发布时间】：2017-06-06 17:55:29
【问题描述】：

我想了解 AngularJS 在观察工厂提供的对象更改时的某种行为。

根据我是在控制器中还是在 html 中读取工厂提供的对象的属性，会有不同的行为。

比较以下两种在视图中显示属性的方式：

app.controller("testController", function($scope, testFactory){
    $scope.test_obj = testFactory.read();
    $scope.test_prop = testFactory.read().prop;
});

<div>{{test_obj.prop}}</div>
<div>{{test_prop}}</div>

当 testFactory 中的属性发生变化时，只有在第一种情况下，当整个对象被声明为作用域并在视图中调用属性时，才会在视图中更新更改。当属性直接声明到作用域时，它不会在视图中自动更新。

可以在以下 jsfiddle 中观察到这种行为：https://jsfiddle.net/fb86p4fm/

这种行为的原因是什么？

【问题讨论】：

标签： javascript angularjs factory watch

【解决方案1】：

$scope.test_prop = testFactory.read().prop;

在上面一行中，prop 的初始值为 0。在 javascript 中，数字是按值复制的，但对象/数组是按引用的。 $scope.test_obj 引用的是服务对象，而 $scope.test_prop 不是。

【讨论】：

【解决方案2】：

我会说$scope.test_obj 是对工厂的obj 的引用，而$scope.test_prop 是obj.prop 的复制值。

如果您在示例中添加以下内容：

console.log(testFactory.read()); // output : Object {prop: 0}
console.log(testFactory.read().prop); // output 0

您会看到 read 方法将返回一个对象，而 read().prop 将返回一个值。

【讨论】：

这很有意义！为什么 $scope.test_obj 变成了引用，而 $scope.test_prop 变成了副本，而不是引用？
是的，我知道返回了不同的类型，一个对象和一个值。我错过了关于您答案第一部分的知识 - 在 javascript 中声明变量时，将复制数字并引用对象。感谢您的帮助！