ng控制器ng模型和$scope如何在任何地方使用angularjs变量

以下是我的问题的当前示例：

我试图接受视图中输入字段中的数字，然后将值传递给控制器，运行计算，然后将新值作为新变量名返回给视图。我是AngularJS的新手，我仍在尝试如何做这里的基础。任何帮助或见解都将不胜感激。谢谢

<div ng-controller="MainCtrl">

Amount: <input type="number" ng-init="amountone=28" ng-model="amountone"> Value: <input type="number" ng-init="valueone=300" ng-model="valueone">
<br />
Amount: <input type="number" ng-init="amounttwo=3.5" ng-model="amounttwo"> Value: <input type="number" ng-init="valuetwo=50" ng-model="valuetwo">
<br /><br />
=========================
<br /><br />
Test ratio: {{ amountone }}/{{ amounttwo}} = {{ ratioone }}<br />
Test ratio: {{ amounttwo }}/{{ amountone}} = {{ ratiotwo }}<br />
</div>

---

使用函数进行计算并返回结果，然后实际绑定该函数。返回值将用于绑定

$scope.ratioone = function() {
  return $scope.amountone / $scope.amounttwo;
};

HTML:

Test ratio: {{ amountone }}/{{ amounttwo}} = {{ ratioone() }}

还请注意，

不应用于布局中的间距。它仅适用于文本中的换行符，如：

<p>This is some text.<br>And this is some more text.</p>

这是一些文本。
这是更多的文本

---

对于布局间距，应用CSS规则，如

边距

，

填充

和

显示：块

，使用函数进行计算并返回结果，然后实际绑定该函数。返回值将用于绑定

$scope.ratioone = function() {
  return $scope.amountone / $scope.amounttwo;
};

HTML:

Test ratio: {{ amountone }}/{{ amounttwo}} = {{ ratioone() }}

还请注意，

不应用于布局中的间距。它仅适用于文本中的换行符，如：

<p>This is some text.<br>And this is some more text.</p>

这是一些文本。
这是更多的文本

---

对于布局间距，应用CSS规则，如

边距

、

填充

和

显示：块

，而不是使用函数按@m59建议进行计算，当情况发生变化时，使用观察者更新计算可能更有效：

'use strict';

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
    $scope.$watch('amountone + amounttwo', function() {
        $scope.ratioone = $scope.amountone / $scope.amounttwo;
        $scope.ratiotwo = $scope.amounttwo / $scope.amountone;
    });
});

将其放入$watch而不是使其成为函数意味着只有当

amountone

或

amounttwo

的值实际更改时，才会进行计算。在另一个示例中，每次需要检查范围更改时都会发生这种情况

虽然在这种情况下，它可能被认为过于工程化，但它不会增加复杂性，并且有助于可读性

---

这种方法也是一种很好的实践，因为它有助于保持前向兼容性。例如，有人可能在3个月内将其重构为一个指令，以便将其放入记录网格中。每个项目都可以有自己的

rationone

和

ratiotwo

。如果您的网格中有1000个项目，那么您可能已经节省了数千次不必要的计算。这只是一个例子，而且这些事情一直都在发生。

与其像@m59建议那样使用函数进行计算，不如在情况发生变化时使用观察者更新计算：

'use strict';

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
    $scope.$watch('amountone + amounttwo', function() {
        $scope.ratioone = $scope.amountone / $scope.amounttwo;
        $scope.ratiotwo = $scope.amounttwo / $scope.amountone;
    });
});

将其放入$watch而不是使其成为函数意味着只有当

amountone

或

amounttwo

的值实际更改时，才会进行计算。在另一个示例中，每次需要检查范围更改时都会发生这种情况

虽然在这种情况下，它可能被认为过于工程化，但它不会增加复杂性，并且有助于可读性

---

这种方法也是一种很好的实践，因为它有助于保持前向兼容性。例如，有人可能在3个月内将其重构为一个指令，以便将其放入记录网格中。每个项目都可以有自己的

rationone

和

ratiotwo

。如果您的网格中有1000个项目，那么您可能已经节省了数千次不必要的计算。这只是一个例子，这些事情一直都在发生。

我真的尝试过这个，但它不起作用，因为我犯了一个错误，用这个{{ratione}代替了这个{{ratione（）}}。我真的尝试过这个，但它不起作用，因为我犯了一个错误，用这个{ratione}代替了这个{{ratione（）}但在控制器中使用$watch（或任何类型的逻辑）不是一种坏习惯吗？@fabio我从来没有听说过这是一种坏习惯。为什么会是一种坏习惯？你有文章描述过吗？@fabio我不应该这样做，尽管我认为$watch仍然不是“坏习惯”，通常有更好的做法。例如，只有当事件发生时，您才能更改其所依赖的因素的值。该问题只为

$watch

提供了足够的范围，使其成为正确答案，但这里可能也有更好的解决方案。一个例子是，使用

ngCh会更有效如果在输入中更改了，则使用ange

而不是

$watch

。我只是没有足够的信息来了解数据的更新方式。但在控制器中使用$watch（或任何类型的逻辑）不是不好的做法？@fabio我从没听说过这是坏习惯。为什么会是坏习惯？你有文章描述过吗？@fabio我不应该这么说，尽管我认为$watch仍然不是“坏习惯”，通常有更好的做法。例如，只有当事件发生时，您才能更改其所依赖的因素的值。该问题只为

$watch

提供了足够的范围，使其成为正确答案，但这里可能也有更好的解决方案。一个例子是，使用

ngCh会更有效如果在输入中更改了，则使用ange

而不是

$watch

。我只是没有足够的信息来了解数据的更新方式。