AngularJS应用程序上的奇怪错误答案

【问题标题】：Strange error on AngularJS appAngularJS应用程序上的奇怪错误
【发布时间】：2014-12-25 09:19:40
【问题描述】：

我在向页面添加控制器时遇到困难，每次将控制器添加到 DOM 元素时都会引发错误。

这是我的 HTML 页面：

<html data-ng-app="sportsStore">
    <head>
        <title>Sports Store</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="application/javascript"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="application/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" type="application/javascript"></script>
        <script type="application/javascript">
            angular.module('sportsStore', ['customFilters']);
        </script>
        <script src="controllers/sportsStore.js" type="application/javascript"></script>
        <script src="controllers/productListControllers.js" type="application/javascript"></script>
        <script src="filters/customFilters.js" type="application/javascript"></script>
    </head>
    <body data-ng-controller="sportsStoreCtrl">
        <div class="navbar navbar-inverse">
            <a class="navbar-brand" href="#">SPORTS STORE</a>
        </div>
        <div class="panel panel-default row" data-ng-controller="productListCtrl">
            <div class="col-xs-3">
                <a data-ng-click="selectCategory()" class="btn btn-block btn-default btn-lg">Home</a>
                <a data-ng-repeat="product in data.products | orderBy:'category' | unique:'category'"
                   data-ng-click="selectCategory(product)" class="btn btn-block btn-default btn-lg">
                   {{product}}
               </a>
            </div>
            <div class="col-xs-8">
                <div class="well" data-ng-repeat="product in data.products | filter:isInCategory">
                    <h3>
                        <strong>{{product.name}}</strong>
                        <span class="pull-right label label-primary">
                            {{product.price | currency}}
                        </span>
                    </h3>
                    <span class="lead">{{product.description}}</span>
                </div>
            </div>
        </div>
    </body>
</html>

当我将data-ng-controller="productListCtrl" 属性添加到我的面板div 时引发错误。如果我把它拿出来，页面加载没有错误。

这是我的 productListControllers.js：

angular.module('sportsStore')
.controller('productListCtrl', function ($scope, $fitler) {
    var selectedCategory = null;
    $scope.selectCategory = function (newCategory) {
        selectedCategory = newCategory;
    };
    $scope.isInCategory = function (product) {
        return selectedCategory == null || product.category == selectedCategory;
    };
});

这是抛出的错误：

Error: [$injector:unpr] http://errors.angularjs.org/1.2.26/$injector/unpr?p0=%24fitlerProvider%20%3C-%20%24fitler
C/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:6:443
gc/l.$injector<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:36:196
c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:34:300
gc/p.$injector<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:36:266
c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:34:300
d@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:35:1
f/<.instantiate@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:35:163
Pd/this.$get</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:67:415
N/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:54:23
r@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:7:369
N@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:53:393
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256
N@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:54:310
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256
z/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:46:374
fc/c/</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:310
Zd/this.$get</k.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:112:57
Zd/this.$get</k.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:112:341
fc/c/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:268
d@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:35:27
fc/c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:248
fc@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:380
Xc@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:17:422
@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:215:30
n.Callbacks/j@http://code.jquery.com/jquery-2.1.1.min.js:2:26852
n.Callbacks/k.fireWith@http://code.jquery.com/jquery-2.1.1.min.js:2:27661
.ready@http://code.jquery.com/jquery-2.1.1.min.js:2:29482
I@http://code.jquery.com/jquery-2.1.1.min.js:2:29656

http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js
Line 92

为什么会这样？我在 JavaScript 文件中看不到任何错误。

【问题讨论】：

确保你不要缩小你的代码，否则它会全部崩溃！

标签： javascript html angularjs angularjs-directive

【解决方案1】：

我想你需要使用$filter 而不是$fitler。

【讨论】：

嗯...这是...尴尬：P。谢谢！
不要回答拼写错误，只需将其作为评论和简历，因为无法复制/拼写错误。
这实际上是问题所在，不敢相信这么一个超级大的错误竟然被一个小错别字抛出
是的，但是由于错字导致的问题不太可能对未来的访问者有所帮助，因此，它们是题外话。像这样的问题有一个“错字”接近投票的原因。
@Cerbrus 我应该删除这个问题吗？

【解决方案2】：

您正在使用缩小的角度源，而您的错误是因为依赖注入器找不到某些东西。包含 Angular 的非缩小版本以查看更多错误细节。

【讨论】：