为什么要在angularjs到return相加数之和中创建一个函数？

Question

我在应用程序中使用 angularjs 有一段时间了，但突然间我完全迷失了 angular.

这种简单的虚幻本质

这是我的代码：

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

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

First Number: <input type="number" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-model="secondNumber"><br>
<br>
Sum: {{result()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstNumber = 0 ;
    $scope.secondNumber = 0;
    $scope.result = function() {
        return $scope.firstNumber + $scope.secondNumber;
    };
});
</script>

</body>
</html>

上面的代码工作正常，但我没有得到的是，对 {{result()}} 的调用更新了视图中的结果。这意味着，每次更改值时都会触发该函数。但据我所知，我希望以下代码能够正常工作，但事实并非如此。

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstNumber = 0 ;
        $scope.secondNumber = 0;
        $scope.result = $scope.firstNumber + $scope.secondNumber;

    });
    </script>

并且在视图中：

Sum : {{result}}

结果只显示初始结果即0，但不显示输入数字更改后的总和。

由于结果在范围上下文中，并且它的值应该在每次用户输入更改时发生变化，为什么总和值没有反映在视图中。

请帮忙！

Answer 1

这是因为您的结果具有不同的数据模型，而且您不必使用函数。您可以使用以下内容显示总和

First Number: <input type="number" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-model="secondNumber"><br>
<br>
Sum: {{firstNumber + secondNumber}}

每次数据模型发生变化时，{{result()}} 也会被触发，您可能希望使用 $scope.$watch 或 ng-change 仅在数据模型发生变化时计算总和firstNumber 或 secondNumber.

Answer 2

显示的结果会随着它的模型在一个不断更新的函数中更新而改变。由于所有 JavaScript 语句作为控制器初始化的一部分仅执行一次，因此第一次评估结果，视图也是如此。但是当您更改值时，Angular 会使用输入字段中的值更新 firstNumber 和 secondNumber 的模型，仅此而已，因为我们没有告诉它在更改值时做任何事情，就像任何其他操作一样其他编程语言功能，JavaScript 和 Angular 都不会重新编译其控制器的所有 JavaScript 语句，因为它是控制器定义的一部分。

下一个问题一定是当我们写的时候会发生什么 {{ firstNumber + secondNumber }}，是 Angular 不断评估这些模型及其相应视图的值（而不是添加这些数字的控制器定义中编写的 JavaScript 语句）。

Answer 3

angularjs 控制器中的每个函数只触发一次。

第一个技巧是在函数中使用 watch

 $scope.result=function(){   
      return $scope.firstNumber + $scope.secondNumber;
   $scope.$watchGroup(['firstNumber ', 'secondNumber'], 
    function(newValues, oldValues, scope) {
    return newValues[0]+newValues[1]
    });
}

第二个技巧是使用 ng-change 执行每个更改

First Number: <input type="number" ng-change="result()" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-change="result()" ng-model="secondNumber"><br>

在控制器中：

  $scope.result = function() {
        return $scope.firstNumber + $scope.secondNumber;
    };

为什么要在angularjs到return相加数之和中创建一个函数？

Why is it necessary to create a function in angularjs to return sum of added numbers?

javascript

2-way-object-databinding

angularjs