AngularJS:数据绑定和点表示法

AngularJS: Databinding and dot-notation

本文关键字：表示 数据绑定 AngularJS      更新时间：2023-09-26

我想我只是在AngularJS中的点符号上浪费了一些时间。

这个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时应该使用对象（点表示法有助于解决搜索嵌套作用域时的参考问题）。但是，我不知道这也适用于这样的简单情况。我更惊讶的是，如果我使用数组（并使用推送/拼接对其进行修改），对我的对象的引用将保持机智：另一个 Plunker

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

这是因为每当从 Javascript 中的函数返回对象时，您实际上是在返回对对象的引用。在您的示例中

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

返回对object的引用。对此引用所做的任何更改都将反映在实际对象中，这就是数据绑定为此工作的原因。

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

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

在这里，当您返回具有值"init"的字符串时，您将返回一个字符串output.string。对object.string所做的任何修改都不会再更改返回的字符串，这就是为什么数据绑定失败的原因 value .

有关详细信息，请参阅此答案。

函数getVal在那个时间点返回output.string的值。 然后，将此值分配给变量 $scope.val。所以在那个时间点 output.string 是"Init"，因此 $scope.val 的值是 "Init"这永远不会改变，为什么会改变？这与 angularjs 2 向数据绑定或点表示法无关。您只需将值"Init"分配给$scope.val，并且再也不会更改它，这是一个纯粹的javascript问题。

相关文章：