我正在尝试使用 add 方法(简单地增加它们的值)更新变量 b 和 c 的值，但是 a (总和两者之一)不反射(reflect)此操作。
我知道我们可以使用 $scope.$watch 函数来更新它们，但我有一个应用程序，其中有许多对象依赖于其他对象。如果我的依赖对象发生变化，我希望我的对象在不使用任何 $watchers 的情况下也发生变化。
这只是一个简单的例子，我试图在观察者的帮助下更新 $scope.a 和 $scope.obj.a 值。我该怎么做？
<html ng-app="app">
<head>
<title></title>
</head>
<body ng-controller="ctrl">
a : {{a}}<br />
b: {{b}}<br />
c: {{c}}<br />
<button ng-click="add();">Add</button>
<br /><br /><br />
obj.a : {{obj.a}}<br />
obj.b: {{obj.b}}<br />
obj.c: {{obj.c}}<br />
<button ng-click="obj.add();">obj.Add</button>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.b = 1;
$scope.c = 2;
$scope.a = $scope.b + $scope.c;
$scope.$watch('b', function (newValue, oldValue) {
$scope.a = $scope.b + $scope.c;
});
$scope.add = function () {
$scope.b++;
$scope.c++;
};
//this is object with dot property example
$scope.obj = {};
$scope.obj.b = 1;
$scope.obj.c = 2;
$scope.obj.a = $scope.obj.b + $scope.obj.c;
$scope.$watch('obj.b', function (newValue, oldValue) {
$scope.obj.a = $scope.obj.b + $scope.obj.c;
});
$scope.obj.add = function () {
$scope.obj.b++;
$scope.obj.c++;
};
});
</script>
</body>
</html>
最佳答案
您可以通过将 a(或分别为 obj.a)声明为函数而不是对象/对象属性来实现此目的。每当它使用的任何属性发生变化时，该函数将由 Angular 自动重新执行，因此您的“a”值将发生变化，而无需您显式定义 watches。
请参阅下面的更新代码:
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.b = 1;
$scope.c = 2;
$scope.a = function() {return $scope.b + $scope.c};
$scope.add = function () {
$scope.b++;
$scope.c++;
};
//this is object with dot property example
$scope.obj = {};
$scope.obj.b = 1;
$scope.obj.c = 2;
$scope.obj.a = function() {
return $scope.obj.b + $scope.obj.c;
}
$scope.obj.add = function () {
$scope.obj.b++;
$scope.obj.c++;
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
<head>
<title></title>
</head>
<body ng-controller="ctrl">
a : {{a()}}<br />
b: {{b}}<br />
c: {{c}}<br />
<button ng-click="add();">Add</button>
<br /><br /><br />
obj.a : {{obj.a()}}<br />
obj.b: {{obj.b}}<br />
obj.c: {{obj.c}}<br />
<button ng-click="obj.add();">obj.Add</button>
</body>
</html>关于javascript - 在angularjs中我们如何实现基于其他对象的对象更新？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30352329/