控制器未找到

时间:2014-10-26 21:20:29

标签: angularjs

我现在正试着尝试角色。我在CustomersController.js中定义了一个控制器。但是,当我跑步时,我得到一个错误"错误:错误:areq Bad Argument"。我的CustomersController没有找到。任何人将不胜感激。感谢。

这是我的HTML文件:

<!DOCTYPE html>
<html lang="en" data-ng-app>
<head>
    <meta charset="UTF-8">

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,800,300' rel='stylesheet' type='text/css'>

</head>
<body ng-controller="CustomersController">

    <h2>Customers</h2>
    Filter: <input type="text" ng-model="customerFilter.name" />

    <table>
        <tr>
            <th ng-click="doSort('name')">Name</th>
            <th ng-click="doSort('city')">City</th>
            <th ng-click="doSort('orderTotal')">Order Total</th>
            <th ng-click="doSort('joined')">Joined</th>
        </tr>

        <tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
            <td>{{ cust.name }}</td>
            <td>{{ cust.city }}</td>
            <td>{{ cust.orderTotal | currency }}</td>
            <td>{{ cust.joined | date }}</td>
        </tr>
    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script src="app/controllers/customersController.js"></script>
</body>
</html>

这是我的CustomerController.js

function CustomersController($scope){
    $scope.sortBy = 'name';
    $scope.reverse = false;
    $scope.customers = [
        {
            joined: "2000-12-24", 
            name: "Charles", 
            city: "Fairfax", 
            orderTotal: "12414432.45"
        },
        {
            joined: "2000-09-12", 
            name: "Jack", 
            city: "Altamonte Springs", 
            orderTotal: "5.9943"
        },
        {
            joined: "2000-01-25", 
            name: "Bill", 
            city: "Waldorf", 
            orderTotal: "100"
        }
    ],
    $scope.doSort = function(propName){
        $scope.sortBy = propName;
        $scope.reverse = !$scope.reverse;
    };
}

2 个答案:

答案 0 :(得分:0)

请将此行添加到您的CustomerController.js

 angular.module("app", []).controller("CustomersController", CustomersController);

&#13;
&#13;
angular.module("app", []).controller("CustomersController", CustomersController);



function CustomersController($scope) {
  $scope.sortBy = 'name';
  $scope.reverse = false;
  $scope.customers = [{
      joined: "2000-12-24",
      name: "Charles",
      city: "Fairfax",
      orderTotal: "12414432.45"
    }, {
      joined: "2000-09-12",
      name: "Jack",
      city: "Altamonte Springs",
      orderTotal: "5.9943"
    }, {
      joined: "2000-01-25",
      name: "Bill",
      city: "Waldorf",
      orderTotal: "100"
    }],
    $scope.doSort = function(propName) {
      $scope.sortBy = propName;
      $scope.reverse = !$scope.reverse;
    };
}
&#13;
<!DOCTYPE html>
<html lang="en" data-ng-app="app">

<head>
  <meta charset="UTF-8">

  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,800,300' rel='stylesheet' type='text/css'>

</head>

<body ng-controller="CustomersController">

  <h2>Customers</h2>
  Filter:
  <input type="text" ng-model="customerFilter.name" />

  <table>
    <tr>
      <th ng-click="doSort('name')">Name</th>
      <th ng-click="doSort('city')">City</th>
      <th ng-click="doSort('orderTotal')">Order Total</th>
      <th ng-click="doSort('joined')">Joined</th>
    </tr>

    <tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
      <td>{{ cust.name }}</td>
      <td>{{ cust.city }}</td>
      <td>{{ cust.orderTotal | currency }}</td>
      <td>{{ cust.joined | date }}</td>
    </tr>
  </table>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  <script src="app/controllers/customersController.js"></script>
</body>

</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

控制器,服务,指令和过滤器都应包含在Angular模块中。为页面定义控制器有两种主要方法。使用routing或仅使用ngController。您正在尝试使用ngController但尚未定义模块。

在您的HTML中,您可以使用ngApp定义主模块。

所以你的HTML标签可以读取:

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

然后,您可以使用以下内容将现有CustomersController分配给此模块:

angular.module('myApp', [])
  .controller('CustomersController', CustomersController);

或者,另一种方法是简单地在控制器块中定义控制器逻辑:

angular.module('myApp', [])
  .controller(function() {
    // your logic here
  });