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

Question

我想了解 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/

这种行为的原因是什么？

Answer 1

我会说 $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 方法将 return 一个对象，而 read().prop 将 return 一个值。

Answer 2

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

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