AngularJS正在过滤搜索结果:Error: [ng:areq]

AngularJS Filteriing Search Result: Error: [ng:areq]

本文关键字：ng areq Error AngularJS 过滤 搜索结果      更新时间：2023-09-26

我试图在angularjs中过滤搜索结果，并在我的chrome控制台得到此错误:error: [ng:areq]

这是我的代码片段 
<div id="notebooks" ng-controller="NotebookListCtrl">
  <input type="text" id="query" ng-model="query"/>
  <select ng-model="orderList">
    <option value="name">By name</option>
    <option value="-age">Newest</option>
    <option value="age">Oldest</option>
  </select>
  <ul id="notebook_ul">
    <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
      name: {{notebook.name}}<br/>
      procesor: {{notebook.procesor}}<br/>
      <div class="right top">{{notebook.age}}</div>
    </li>
  </ul>
  <span>Number of notebooks: {{notebooks.length}}</span>
</div>

这是我做的哑铃http://plnkr.co/edit/P1DFr3fEuWiYGfC0k7bj?p=preview

一切似乎都很好，但我不知道为什么我得到上面的错误

angular.module("myApp",["ngSanitize"])
.controller('NotebookListCtrl', ['$scope',
  function ($scope) {
    $scope.notebooks = [
      {"name": "Lenovo",
       "procesor": "Intel i5",
       "age": 2011},
      {"name": "Toshiba",
       "procesor": "Intel i7",
       "age": 2010},
      {"name": "Toshiba",
       "procesor": "Intel core 2 duo",
       "age": 2008},
      {"name": "HP",
       "procesor": "Intel core 2 duo",
       "age": 2012},
      {"name": "Acer",
       "procesor": "AMD",
       "age": 2006},
      {"name": "Lenovo",
       "procesor": "Intel i5",
       "age": 2009},
      {"name": "Toshiba",
       "procesor": "Intel i7",
       "age": 2008},
      {"name": "Lenovo",
       "procesor": "Intel i5",
       "age": 2011},
      {"name": "Toshiba",
       "procesor": "Intel i7",
       "age": 2010},
      {"name": "Toshiba",
       "procesor": "Intel core 2 duo",
       "age": 2008},
      {"name": "HP",
       "procesor": "Intel core 2 duo",
       "age": 2012},
      {"name": "Acer",
       "procesor": "AMD",
       "age": 2006},
      {"name": "Lenovo",
       "procesor": "Intel i5",
       "age": 2009},
      {"name": "Toshiba",
       "procesor": "Intel i7",
       "age": 2008},
      {"name": "Lenovo",
       "procesor": "Intel i5",
       "age": 2011},
      {"name": "Toshiba",
       "procesor": "Intel i7",
       "age": 2010},
      {"name": "Toshiba",
       "procesor": "Intel core 2 duo",
       "age": 2008},
      {"name": "HP",
       "procesor": "Intel core 2 duo",
       "age": 2012},
      {"name": "Acer",
       "procesor": "AMD",
       "age": 2006},
      {"name": "Lenovo",
       "procesor": "Intel i5",
       "age": 2009},
      {"name": "Toshiba",
       "procesor": "Intel i7",
       "age": 2008}
    ];
    $scope.orderList = "name";
  }
]);

如下所示正确定义控制器

更新:http://plnkr.co/edit/P1DFr3fEuWiYGfC0k7bj?p=preview

var app = angular.module("myApp",["ngSanitize"]);
app.controller('NotebookListCtrl',['$scope',function($scope){
  $scope.notebooks = [
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2011},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2010},
    {"name": "Toshiba",
     "procesor": "Intel core 2 duo",
     "age": 2008},
    {"name": "HP",
     "procesor": "Intel core 2 duo",
     "age": 2012},
    {"name": "Acer",
     "procesor": "AMD",
     "age": 2006},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2009},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2008},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2011},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2010},
    {"name": "Toshiba",
     "procesor": "Intel core 2 duo",
     "age": 2008},
    {"name": "HP",
     "procesor": "Intel core 2 duo",
     "age": 2012},
    {"name": "Acer",
     "procesor": "AMD",
     "age": 2006},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2009},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2008},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2011},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2010},
    {"name": "Toshiba",
     "procesor": "Intel core 2 duo",
     "age": 2008},
    {"name": "HP",
     "procesor": "Intel core 2 duo",
     "age": 2012},
    {"name": "Acer",
     "procesor": "AMD",
     "age": 2006},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2009},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2008}
  ];
  $scope.orderList = "name";
}]);

错误是

Argument 'NotebookListCtrl' is not a function, got undefined

如果你在浏览器控制台中点击[ng:areq]旁边的url就可以找到

你得到这个错误是因为你没有以正确的方式定义控制器。AngularJS 1.2之后不允许"控制器作为全局函数"语法，你需要把它添加到你的模块中，像这样:

angular.module("myApp").controller('NotebookListCtrl',NotebookListCtrl);

要实现最小化安全注入，还应该执行以下操作

NotebookListCtrl.$inject = ['$scope'];
相关文章：