定义了Angularjs控制器但从未使用过

时间:2018-08-17 09:55:38

标签: angularjs

我是AngularJS的新手。我在单独的文件中创建了一个控制器,并在html文件中调用了它,这给了我这个错误:

  

CustomerController已定义但从未使用过!

这是我的HTML代码:

<body ng-controller="CustomerController">

  Filter:
  <input type="text" ng-model="customerFilter.name" />
  <br />
  <br />
  <table>
    <tr>
      <th ng-click="doSort('name')"> Name</th>
      <th ng-click="doSort('city')"> City</th>
      <th ng-click="doSort('order')"> Order</th>
      <th ng-click="doSort('joined')"> Joined</th>
    </tr>
    <tr ng-repeat="cust in cutomers | filter : customerFilter | orderBy: sortBy ">
      <td>{{ cust.name }}</td>
      <td>{{ cust.city }}</td>
      <td>{{ cust.order }}</td>
      <td>{{ cust.njoined }}</td>
    </tr>

  </table>
  <br />
  <span>Total custumer : {{ Customers.legth }}</span>
  <script src="angular.js"></script>
  <script src="app/controllers/customersController.js"></script>

</body>

这是我的控制器文件:

function CustomerController($scope) {

  $scope.sortBy = 'name';
  $scope.customers = [{
    joined: '2000-12-02',
    name: 'john',
    city: 'NY',
    order: '9.9956'
  }, {
    joined: '1999-11-10',
    name: 'hf',
    city: 'fjkog',
    order: '8.56'
  }, {
    joined: '1998-4-6',
    name: 'Ali',
    city: 'NYCity',
    order: '7.7956'
  }];
  $scope.doSort = function(propName) {
    $scope.sortBy = propName;
  };
}

有人可以帮我吗?

1 个答案:

答案 0 :(得分:1)

您需要将控制器绑定到您的角度模块

var CustomerController = function($scope) {

  $scope.sortBy = 'name';
  $scope.customers = [{
    joined: '2000-12-02',
    name: 'john',
    city: 'NY',
    order: '9.9956'
  }, {
    joined: '1999-11-10',
    name: 'hf',
    city: 'fjkog',
    order: '8.56'
  }, {
    joined: '1998-4-6',
    name: 'Ali',
    city: 'NYCity',
    order: '7.7956'
  }];
  $scope.doSort = function(propName) {
    $scope.sortBy = propName;
  };
};
angular.module('myApp').controller('CustomerController', CustomerController);

然后,不要忘记在视图中添加NgApp指令

<body ng-app="myApp" ng-controller="CustomerController">

  Filter:
  <input type="text" ng-model="customerFilter.name" />
  <br />
  <br />
  <table>
    <tr>
      <th ng-click="doSort('name')"> Name</th>
      <th ng-click="doSort('city')"> City</th>
      <th ng-click="doSort('order')"> Order</th>
      <th ng-click="doSort('joined')"> Joined</th>
    </tr>
    <tr ng-repeat="cust in cutomers | filter : customerFilter | orderBy: sortBy ">
      <td>{{ cust.name }}</td>
      <td>{{ cust.city }}</td>
      <td>{{ cust.order }}</td>
      <td>{{ cust.njoined }}</td>
    </tr>

  </table>
  <br />
  <span>Total custumer : {{ Customers.legth }}</span>
  <script src="angular.js"></script>
  <script src="app/controllers/customersController.js"></script>

</body>