AngularJS正在观察工厂对象的属性 - 意外行为

时间:2017-06-06 17:55:29

标签: javascript angularjs factory watch

我想了解AngularJS在观察工厂提供的物体变化时的某些行为。

根据我是否在控制器或html中读取工厂提供的对象的属性,存在不同的行为。

比较以下2种在视图中显示属性的方法:

group | type | element | type | element | type | element | type | element
------+------+---------+------+---------+------+---------+------+--------
    3 |    4 | L       |    5 | O       |    6 | Q       |    7 | R
    3 |    4 | L       |    5 | O       |    6 | Q       |    7 | S
    3 |    4 | L       |    5 | O       |    6 | Q       |    7 | T
    3 |    4 | L       |    5 | P       |    6 | Q       |    7 | R
    3 |    4 | L       |    5 | P       |    6 | Q       |    7 | S
    3 |    4 | L       |    5 | P       |    6 | Q       |    7 | T
    3 |    4 | M       |    5 | O       |    6 | Q       |    7 | R
    3 |    4 | M       |    5 | O       |    6 | Q       |    7 | S
    3 |    4 | M       |    5 | O       |    6 | Q       |    7 | T
    3 |    4 | M       |    5 | P       |    6 | Q       |    7 | R
    3 |    4 | M       |    5 | P       |    6 | Q       |    7 | S
    3 |    4 | M       |    5 | P       |    6 | Q       |    7 | T
    3 |    4 | N       |    5 | O       |    6 | Q       |    7 | R
    3 |    4 | N       |    5 | O       |    6 | Q       |    7 | S
    3 |    4 | N       |    5 | O       |    6 | Q       |    7 | T
    3 |    4 | N       |    5 | P       |    6 | Q       |    7 | R
    3 |    4 | N       |    5 | P       |    6 | Q       |    7 | S
    3 |    4 | N       |    5 | P       |    6 | Q       |    7 | T

当testFactory中的属性发生更改时,仅在第一种情况下,在将整个对象声明为范围并在视图中调用属性时,更改才会在视图中更新。当属性直接声明到作用域时,它不会在视图中自动更新。

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

这种行为的原因是什么?

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

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

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