javascript AngularJS 应用程序运行不正常
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19590925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS app not running correctly
提问by Paul Samsotha
I'm new to AngularJS. I'm trying to run a simple example from a book, but it's not working correctly, and I can't figure out why.
我是 AngularJS 的新手。我正在尝试从书中运行一个简单的示例，但它无法正常工作，而且我不知道为什么。
This code runs fine:
这段代码运行良好：
<html ng-app>
<head>
<script src="angular.js"></script>
<meta charset="UTF-8">
<title>Angular </title>
</head>
<body>
<div ng-controller="HelloController">
<input ng-model="greeting.text"/>
<p>{{greeting.text}}, World!</p>
</div>
<script src="angular.js"></script>
<script>
function HelloController($scope) {
$scope.greeting = {text: 'Hello'};
}
</script>
</body>
</html>
But this is the code I'm having problems with
但这是我遇到问题的代码
<html ng-app='myApp'>
<head>
<title>Shopping Cart</title>
<script src="angular.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>{{item.price| currency}}</span>
<span>{{item.price * item.quantity| currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>
Expecting this output:
期待这个输出：
But getting this output:
但是得到这个输出：
I don't understand why I'm not getting the data output, and why it's not repeating. Basically, why the example is not running. I copy and paste the code straight from the book.
我不明白为什么我没有得到数据输出，为什么不重复。基本上，为什么示例没有运行。我直接从书中复制并粘贴了代码。
回答by Beterraba
When you write ng-app='myApp'you are saying to angular that exists a module named myAppsomewhere.
当你写的时候，ng-app='myApp'你是在说 angular 存在一个在myApp某处命名的模块。
Just add this line before your controllers definition:
只需在控制器定义之前添加这一行：
var myApp = angular.module('myApp',[]);
var myApp = angular.module('myApp',[]);
回答by Prateek
You should define your myAppmodule:
你应该定义你的myApp模块：
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="lib/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('CartController', ['$scope', function($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}]);
</script>
</body>
</html>
回答by Roisgoen
Or you can also add the namespace:
或者你也可以添加命名空间：
<html lang="en" ng-app="myapp" xmlns:ng="http://angularjs.org">
Even though, adding the module is the best way.
尽管如此，添加模块是最好的方法。
回答by Sfoorti
Give the name of app as html ng-app="myapp" in html file and then add/define the module into the controller as var myapp = angular.module('myapp', []);
在 html 文件中将应用程序的名称命名为 html ng-app="myapp"，然后将模块添加/定义到控制器中 var myapp = angular.module('myapp', []);
回答by Stackhelper
Even I faced this problem, resolved it by invoking module creation scope before controller js . Also ensure module is created in script or js file.
即使我遇到了这个问题，也通过在控制器 js 之前调用模块创建范围来解决它。还要确保模块是在脚本或 js 文件中创建的。
回答by MichaelHasfel
I fixed.
我解决了。
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shopping Cart</title>
<script src="angular-1.5.3/angular.js"></script>
<script>
var myApp = angular.module('myApp',[])
myApp.controller('CartController', function($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka Dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index){
$scope.items.splice(index, 1);
};
});
</script>
</head>
<body ng-controller="CartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity" />
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
</body>
</html>
