javascript - AngularJS:数据绑定(bind)和点表示法

Question

我想我只是在 AngularJS 中的点表示法上浪费了一些时间。

This Plunker演示了仍然让我恼火的问题:

app.controller('MainCtrl', function($scope, ValueService) {
$scope.obj= ValueService.getObject(); // Output: {"string": "New!!!"}
$scope.val = ValueService.getVal(); // Output: "init"
ValueService.setVal();

})
.service('ValueService', function(){
var output= {string: 'init'};

this.setVal = function(val){
output.string = 'New!!!';
};

this.getObject = function(){
return output;
};

this.getVal = function(){
return output.string;
};

return this;
});

我确实知道在使用 ng-model 时应该使用对象(点表示法有助于解决搜索嵌套范围时的引用问题)。然而我不知道这也适用于像这样的简单案例。我更惊讶的是，如果我使用数组(并使用推送/拼接修改它)，对我的对象的引用保持不变: another Plunker

有人可以解释为什么当我重新分配它时数据绑定(bind)不再适用于值吗？有没有办法在不从服务传递包装对象的情况下实际绑定(bind)到值？

Answer 1

这是因为每当你从 JavaScript 中的函数返回一个对象时，你实际上返回的是一个对象的引用。在你的例子中

this.getObject = function(){
    return output;
};

返回对对象的引用。对此引用所做的任何更改都将反射(reflect)在实际对象中，这就是数据绑定(bind)适用于此的原因。

然而，当您从函数返回字符串时，您返回的是值，而不是对实际字符串的引用。

this.getVal = function(){
    return output.string;
};

当您返回具有值“init”的output.string时，您将返回一个字符串。对 object.string 进行的任何修改都不会再更改返回的字符串，这就是 value 数据绑定(bind)失败的原因。

参见this answer了解更多信息。