Ошибка: $injector:unpr Unknown Provider
Пример Unknown provider: copeProvider <- $scope <- addIngrFilterFilter
Возникает тогда, когда в сервис поставляют зависимости, которые не могут быть разрешены. В первую очередь это $scope
или просто значения без определенного места декларации.
Фильтры
Фильтры - это тоже сервисы (service vs provider vs factory). Никаких $scope
в сервисах, и тогда все будет хорошо. Это не правило, но пользоваться можно.
Фильтры, передача параметров из области видимости
Используйте нотацию ... | mySuperFilter:param2:param3:...
Дело в том, что param1
будет передан автоматически. Т.е. в теоретическом виде наш фильтр должен возвращать функцию вида function(param1, param2, param3, ...) { ... }
Если присмотреться, то на самом деле мы можем передавать что угодно из $scope
в любом из аргументов, кроме первого, который реализуется автоматически в зависимости от того, к чему применяем фильтр.
Ресурсы
Наивнятнейшая статья на эту тему Everything about custom filters in AngularJS
Пример
Реализован фильтр с дополнительным параметром отображения разрешения условия. Вызывая addIngrFilter:dishIngredientsIndexes:true
вы получите содержимое обратное решению.
var app = angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.dishIngredientsIndexes = [1, 2, 3, 4, 5, 6];
$scope.ingredients = [{
id: 1,
name: 'Соль'
}, {
id: 2,
name: 'Сахар'
}, {
id: 3,
name: 'Мука'
}, {
id: 4,
name: 'Яйца'
}, {
id: 5,
name: 'Вода'
}, {
id: 6,
name: 'Масло'
}, {
id: 7,
name: 'Немного Йаду'
}, {
id: 8,
name: 'Мышиные хвосты'
}];
}
])
.filter('addIngrFilter', function() {
return function(items, dishIngredientsIndexes, reverse) {
reverse = !!reverse;
var filtered = [];
items.forEach(function(item) {
if ((dishIngredientsIndexes.indexOf(item.id) == -1) ^ reverse) {
filtered.push(item);
}
});
return filtered;
};
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h4>ingredients</h4>
</div>
<div class="col-md-4 col-md-offset-4" ng-repeat="d in ingredients">
{{$index + 1}}. {{d.name}}
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h4>dish Ingredients</h4>
</div>
<div class="col-md-4 col-md-offset-4" ng-repeat="d in ingredients | addIngrFilter:dishIngredientsIndexes:true">
{{$index + 1}}. {{d.name}}
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h4>Not IN dish Ingredients Indexes</h4>
</div>
<div class="col-md-4 col-md-offset-4" ng-repeat="d in ingredients | addIngrFilter:dishIngredientsIndexes">
{{$index + 1}}. {{d.name}}
</div>
</div>
</div>
</body>
</html>