Question

我是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>

请指导。

Answer 1

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

要获得HTML上的计算结果，您应该关注@chet answer。

<强>代码

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

Answer 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中工作

2 个答案: