Angularjs绑定问题答案

【问题标题】：Angularjs Bind issueAngularjs绑定问题
【发布时间】：2016-08-03 20:44:11
【问题描述】：

我有一个简单的示例代码，由 3 个变量 a b 和 testvar 组成，testvar 是 a 和 b 的总和，我试图理解为什么当 a 的值发生变化时绑定对变量 testvar 不起作用，我创建了一个输入其模型为 a。这是如何实现的，非常感谢任何帮助

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input  ng-model="mymodel.a"><br>
Why this value does ot change on changing input:{{ mymodel.testvar}}
<br>
mymodel.a changes on input change: {{mymodel.a}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.mymodel={};

 $scope.mymodel.a=1;
$scope.mymodel.b=2
$scope.mymodel.testvar =$scope.mymodel.a+$scope.mymodel.b;
});
</script>

<p>Test Binding.</p>

</body>
</html>

【问题讨论】：

标签： angularjs binding

【解决方案1】：

这一行：

$scope.mymodel.testvar =$scope.mymodel.a+$scope.mymodel.b;

使用a 和b 的初始值仅将a + b 绑定到testvar 一次。

一种解决方案是将testvar 变成一个函数，如下所示：

// Javascript
$scope.getTestVar = function() {
    return $scope.mymodel.a+$scope.mymodel.b;
};

<!-- HTML -->
TestVar: {{getTestVar()}}

【讨论】：

【解决方案2】：

当您更改 mymodel.a 或 mymodel.b 时，您的 mymodel.testvar 没有得到更新的原因是，当您的控制器第一次运行时，testvar 被评估为 a 和 b 的总和的初始值因此 testvar 等于 3。因此变量 testvar 存储文字值 3。现在，当您将 a 或 b 更改为 4 时，您不会重新评估 testvar。 testvar 仍然是 3。在这种情况下，如果您想重新计算 testvar 必须将其放入像 mymodel.testvar = function(){ return mymodel.a + mymodel.b}; 这样的函数中，然后绑定到函数调用。或者在 Angular 中，您可以直接绑定到加法表达式，例如 {{mymodel.a + mymodel.b}}

【讨论】：

谢谢！简洁的解释