Question

刚开始学习Angular。我正在从O'Reilly的书中复制一行示例行，并得到Cart Controller不是函数的消息。我真的不能在下面的例子中看到我做错了什么：

HTML：

<!DOCTYPE html>
<html ng-app>
<head>
  <title>AngularJS Tutorials</title>
  <link rel="stylesheet" href="css/bootstrap.css"></link>
  <script type="text/javascript" src="scripts/angular.js"></script>
  <script type="text/javascript" src="scripts/myscripts.js"></script>


</head>
<body ng-controller='CartController'>

  <div>
        <h1>
            Your Shopping Cart
        </h1>
    </div>
    <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>
  </div>



</body>
</html>

myscripts.js如下：

function CartController($scope) {
    $scope.items = [
        {title: 'paint pot', quantity: 8, price: 3.95},
        {title: 'paint brush', quantity: 12, price: 2.66}
    ]

    $scope.remove = function(index) {
        $scope.items.splice($index);
    }
}

根据chrome网络控制台正确定位了

myscripts.js。但是当我将控制器的脚本放在html页面上时，我得到了同样的信息。

Answer 1

这就是我使用此代码的方法。

首先，我在剧本的顶部添加了这一行。

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

这会以角度注册应用程序。

接下来我通过像myApp这样注册它来改变控制器：

myApp.controller('CartController', function($scope){    
    $scope.items = [
        {title: 'paint pot', quantity: 8, price: 3.95},
        {title: 'paint brush', quantiry: 12, price: 2.66}
    ]

    $scope.remove = function(index) {
        $scope.items.splice($index);
    }
});

然后我用HTML

做了这个

<html lang="en"  ng-app="myApp">

这是工作plunk。

Answer 2

在我的数据数组定义$ scope.items ....

之后看起来我错过了一个半冒号

立即工作; - ）

控制器xxx不是AngularJS中未定义的函数

2 个答案: