Question

我在向页面添加控制器时遇到了困难，每次将其添加到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文件中看到任何错误。

Answer 1

我想您需要使用$filter代替$fitler。

Answer 2

你正在使用缩小的角度源，你的错误是因为依赖注入器无法找到某些东西。包括非缩小版角度以查看更多错误详细信息。

AngularJS应用程序出现奇怪错误

2 个答案: