-2
У меня возникли трудности с добавлением контроллера на мою страницу, ошибка возникает каждый раз, когда я добавляю его в элемент DOM.Странная ошибка в приложении AngularJS
Это мой 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
[email protected]://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
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:34:300
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:35:1
f/<[email protected]://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
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:7:369
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:53:393
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:54:310
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256
[email protected]://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</[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:112:57
Zd/this.$get</[email protected]://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
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:35:27
fc/[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:248
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:380
[email protected]://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/[email protected]://code.jquery.com/jquery-2.1.1.min.js:2:26852
n.Callbacks/[email protected]://code.jquery.com/jquery-2.1.1.min.js:2:27661
[email protected]://code.jquery.com/jquery-2.1.1.min.js:2:29482
[email protected]://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.
убедитесь, что вы не уменьшаете свой код или все переломится! – DrogoNevets