不显示HTML页面中的角JS
我知道这个问题被问了很多次。但老实说，我不知道我做错了什么，而我找到的解决方案似乎并不奏效。
作为参考，我遵循本教程：https://www.youtube.com/watch?v=OPxeCiy0RdY
不管怎么说。我正在制作一个简单的角度应用程序，让我们输入两个值，并返回结果，我还在HTML代码底部添加了一个小型测试器，检查并查看我的javascript文件中是否有问题。我已经在脚本标记中检查了我的引用，并确保它们是正确的，所有的文件也都在同一个目录中。我已经构建了控制器、模块，并在HTML代码中引用了它们。但出于某种原因，当我加载索引页时，它根本不识别角码部分。我的代码如下：
HTML：
<!DOCTYPE HTML>
<html ng-app="app1">
<head>
<title>Angular Practice Page</title>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<!-- Adds a controller that the Angular module will control.
The view is the div element and all that it contains. The $scope
component is used to provide data to the view. -->
<body>
<div ng-controller="ctrl1">
<span>Calculate:</span>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
<button ng-click="updateValue()">Sum</button>
<br /><br />
{{calculation}}
<!-- Test Calculation -->
<p>
5 + 5 = {{5+5}}
</p>
</div>
</body>
</html>角码：
var app1 = angular.module('app1', []);
app1.controller('ctrl1', function($scope){
$scope.first = 1;
$scope.second = 1;
$scope.updateValue = function() {
$scope.calculation = $scope.first + ' + ' + $scope.second +
' = ' + ($scope.first + $scope.second);
};
});图片：
我试着把"ng-app“转到HTML文件中代码的不同部分，只是在没有运气的情况下到处乱翻。
教程老师在这里也有一套完整的代码：http://www.newthinktank.com/2016/02/angularjs-tutorial/，即使我逐字复制这个代码，它也不起作用。我的电脑有问题吗？作为参考，我使用Atom文本编辑器和google作为我的浏览器。我用其他浏览器对它进行了测试，得到了同样的结果。
任何解释都将不胜感激。提前感谢！
Stack Overflow用户
发布于 2017-04-14 20:21:51
- 包括顶部的角度。因为您的脚本引用了
angular，所以在执行script.js时没有加载它。 - 使用输入类型
number而不是文本。因为，text字段为您提供字符串值，这将导致字符串连接，而不是算术操作。
var app1 = angular.module('app1', []);
app1.controller('ctrl1', function($scope){
$scope.first = 1;
$scope.second = 1;
$scope.updateValue = function() {
$scope.calculation = $scope.first + ' + ' + $scope.second +
' = ' + ($scope.first + $scope.second);
};
});<!DOCTYPE HTML>
<html ng-app="app1">
<head>
<title>Angular Practice Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<!-- Adds a controller that the Angular module will control.
The view is the div element and all that it contains. The $scope
component is used to provide data to the view. -->
<body>
<div ng-controller="ctrl1">
<span>Calculate:</span>
<input type="number" ng-model="first" />
<input type="number" ng-model="second" />
<button ng-click="updateValue()">Sum</button>
<br /><br />
{{calculation}}
<!-- Test Calculation -->
<p>
5 + 5 = {{5+5}}
</p>
</div>
</body>
</html>
https://stackoverflow.com/questions/43418604
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号