2

我是 AngularJS 的新手。我正在尝试从书中运行一个简单的示例，但它无法正常工作，我不知道为什么。

此代码运行良好：

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

在此处输入图像描述

但这是我遇到问题的代码

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

期待这个输出：

在此处输入图像描述

但是得到这个输出：

在此处输入图像描述

我不明白为什么我没有得到数据输出，为什么它没有重复。基本上，为什么该示例没有运行。我直接从书中复制并粘贴代码。

4

6 回答 6

18

当您写作时，ng-app='myApp'您是在说 Angular 存在一个名为myApp某处的模块。

只需在控制器定义之前添加这一行：

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

您可以在此处和此处查看文档

于 2013-10-25T13:22:58.887 回答
6

你应该定义你的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>
于 2013-10-25T13:22:41.110 回答
0

或者您也可以添加命名空间：

<html lang="en" ng-app="myapp" xmlns:ng="http://angularjs.org">

尽管如此，添加模块是最好的方法。

于 2014-03-25T07:05:52.963 回答
0

在 html 文件中将应用程序的名称命名为 html ng-app="myapp"，然后将模块添加/定义到控制器中 var myapp = angular.module('myapp', []);

于 2014-04-02T21:06:08.440 回答
0

即使我遇到了这个问题，也可以通过在控制器 js 之前调用模块创建范围来解决它。还要确保在脚本或 js 文件中创建模块。

于 2014-07-30T06:46:59.747 回答
0

我解决了。

<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>
于 2016-04-07T14:19:34.200 回答