2

Добрый день.

Несколько часов бьюсь над проблемой, причина которой, скорее всего, мое слабое знание AngularJS. Как говорится, все пальцы в кровь сгуглил, а решения не нашёл.

Надо создать кастомный фильтр, который отбраковывал бы все, что входит в заданный массив. Массив доступен в $scope, фильтр в отдельном файле addIngrFilter.js

Вот код файла с фильтром:

angular
.module('quApp')
.filter('addIngrFilter', ['$scope', function($scope) {
    return function (items){
        var filtered = [];
        items.forEach(function(item){
            if($scope.dishIngredientsIndexes.indexOf(item.id)<0){
                filtered.push(item);
            }
        });
        return filtered;
    };
}]);

Однако, Angular ругается, говорит Error: [$injector:unpr] и шлёт по адресу: https://docs.angularjs.org/error/$injector/unpr?p0=%3C!--%20ngRepeat:%20ingredient%20in%20ingredients%20%7C%20addIngrFilter%20--%3EcopeProvider%20%3C-%20$scope%20%3C-%20addIngrFilterFilter

Что я здесь делаю не так?

1
  • Где вы используете фильтр, в шаблоне? Commented 6 авг. 2015 в 17:15

3 ответа 3

1

Ошибка: $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>

1
  • 1
    Спасибо! Я пошёл примерно по тому же пути, только ещё один хороший человек присоветовал мне Underscore, вообще красота вышла. Commented 7 авг. 2015 в 8:09
1

Если я вас правильно понял, вот пример передачи текущей области видимости в фильтр. На примере вашего фильтра.

var app = angular.module('App', []);
app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.numbers = [{id:1, body:'1'},{id:2, body:'2'},{id:3, body:'3'},{id:4, body:'4'},{id:5, body:'5'},{id:6, body:'6'},{id:7, body:'7'},{id:8, body:'8'},{id:9, body:'9'},{id:10, body:'10'}];
        $scope.dishIngredientsIndexes = [5,6,7];
        
      }
    ]
  );
  


app.filter('addIngrFilter', [function() {
    return function (items, scope){
        console.log(items,scope);
        var filtered = [];
        items.forEach(function(item){
            if(scope.dishIngredientsIndexes.indexOf(item.id)<0){
                filtered.push(item);
            }
        });
        return filtered;
    };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App">
    <div ng-controller="AppController">
    <p ng-repeat="number in numbers  | addIngrFilter:this"> {{ number }}
    </p>
    </div>
</body>

1

В итоге решение оказалось простым, как и сказал Alexander Ivanov - нефига в фильтр пихать скоуп, а пихать туда надо непосредственно массив-фильтр.

angular
 .module('quApp')
 .filter('ingrListFilter', function() {
   return function (items, filter){
     return _.reject(items, function(item){
       return _.contains(filter, item.id);
     });
   };
 });

И вызов фильтра:

<span ng-repeat="ingredient in ingredients | ingrListFilter:dishIngredientsIndexes">
   <span class="badge">{{ingredient.name}}</span>
</span>

Спасибо за советы!

2
  • С Underscore выглядит очень компактно.
    – oshliaer
    Commented 10 авг. 2015 в 13:50
  • Сам тащусь от него Commented 12 авг. 2015 в 4:46

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.