控制器在 Angular JS 中不起作用答案

【问题标题】：Controller not working in Angular JS控制器在 Angular JS 中不起作用
【发布时间】：2016-03-11 02:47:28
【问题描述】：

我是 Angular JS 的新手。为了查看控制器的工作，我实现了这个简单的代码，其中两个数字作为用户的输入，它们的总和在控制器中计算，结果显示在视图中。但不知何故，它不起作用。代码如下：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>

<body>
<div ng-app="CalculatorApp" ng-controller="CalculatorController">
<p> Number 1 <input type="number" ng-model="a"></p>
<p> Number 2 <input type="number" ng-model="b"></p>
<p> Addition is {{c}} </p>
</div>

angular.module('CalculatorApp', [])
.controller('CalculatorController', function($scope) 
{
$scope.c=$scope.a + $scope.b;
});

</body>
</html>

请指导。

【问题讨论】：

你忘记了你的脚本标签...

标签： javascript angularjs angularjs-controller angularjs-module

【解决方案1】：

您需要在script标签中添加JavaScript代码和type='text/javascript'，以便在解析页面时运行所需的JavaScript。

为了获得 HTML 上的计算结果，您应该遵循 @chet 答案。

代码

<script type="text/javascript">
    angular.module('CalculatorApp', [])
    .controller('CalculatorController', function($scope) {
         $scope.c = $scope.a + $scope.b; //should follow @chet answer
    });
</script>

【讨论】：

【解决方案2】：

首先，您忘记将 JavaScript 包装在 <script></script> 标记中。即使那样你也有问题。

将Addition is {{c}} 更改为Addition is {{a + b}}，完全放弃控制器计算。

函数中的代码定义了控制器，并不是每次发生变化时都会执行。

或者，您可以在 $scope 上定义一个函数，然后调用该函数。

$scope.calc = function() {
    return $scope.a + $scope.b;
};

然后将您的 HTML 更改为 Addition is {{calc()}}。

【讨论】：

获得脚本标签部分。
获得了脚本标签部分。也知道添加可以在视图中没有控制器的情况下执行。但只是想了解控制器的工作原理。是在控制器中进行添加所必需的功能吗？
是的，你必须定义一个函数。
控制器功能必要性的任何原因。你能详细说明一下吗？很抱歉，因为我对 Angular js 完全陌生
首先，您不需要函数。如果您不想在视图中进行计算，则只需要一个函数（这是合理的，例如它可能比 a + b 更复杂，或者简单的关注点分离）。但是，如果您不希望它出现在视图中，则需要在某处进行计算。您不能像拥有它那样将它放入控制器中，因为它只会在初始化时运行，而不是在 a 或 b 更改时运行。另一种选择是在 a 和 b 上放置一个监视，以便对它们的更改修改另一个变量 c。但我的理解是放置手表是不可取的。