Пользовательский фильтр AngularJS 1.x не может быть введен, неизвестный провайдер

Я пытаюсь создать собственный фильтр, но когда я пытаюсь внедрить его в свой контроллер, я получаю сообщение об ошибке «Неизвестный поставщик». Я проверил и перепроверил все ссылки, но не вижу, что не так.

Я знаю, что файл указан в моем index.html правильно, он загружен и может быть найден инспектором. Это код, который у меня есть:

В моем приложении.js:

angular.module('equiclass', ['equiclass.controllers',
                         'equiclass.services',
                         'ngRoute'])
.config(function ($routeProvider) {
$routeProvider
  .when('/courses', {
    templateUrl: 'views/courses.html',
    controller: 'CourseCtrl'
  // And some other stuff with routes
});

angular.module('equiclass.controllers', ['equiclass.services', 'equiclass.filters']);
angular.module('equiclass.services', []);
angular.module('equiclass.filters', []);

Мой фильтр:

angular.module('equiclass.filters')
  .filter('testFilter', function() {
    return function(input) {
      return undefined;
    };
});

И контроллер:

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilter) {

  });

Конечно, это довольно упрощенно, но это просто не работает, и я не понимаю, почему. Я сделал несколько сервисов, и все они работают и прекрасно работают.


angularjs angularjs-filter
person stinaq    schedule 16.04.2014    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Вам не нужно вводить сам фильтр.

Этот код...

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilter) {

  });

Должно быть

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope) {

  });

И внутри CourseCtrl вы должны использовать свой фильтр, как обычно.

Достаточно внедрить модуль 'equiclass.filters' в ваш модуль 'equiclass.controllers'.

У меня была аналогичная проблема, и я написал об этом сообщение в моем блоге.

--Редактировать

Как упоминает ниже n00dl3, сложная часть заключается в том, как работает соглашение об автоматическом именовании в Angular. Если вы назовете свой фильтр specialNumberFilter, то при его внедрении вам нужно будет ссылаться на него как specialNumberFilterFilter. Это позволяет вам использовать фильтр как функцию, чем она и является.

// In a controller vm.data = specialNumberFilterFilter(vm.data, 'a');

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

// Inside a watch - no controller injection required `$scope.$watch('vm.data | specialNumberFilter', function(new, old) { ... })`

person seangwright    schedule 20.09.2014
comment
На самом деле этого недостаточно, согласно документации angular, вам нужно внедрить фильтр, если вы хотите использовать его в своем контроллере, вы должны внедрить его следующим образом: controller('MyController', ['<filter name>Filter', function(<filter name>Filter) {}]); RTFM - person n00dl3; 19.03.2015
comment
Ссылка на блог не работает. - person Joshua Drake; 05.04.2017

arrow_upward
15
arrow_downward

Если вы хотите использовать фильтр внутри контроллера, вам нужно ввести атрибут $filter в свой контроллер и получить к нему доступ, например

$filter('filtername');

Вы можете использовать как

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}
person BKM    schedule 16.04.2014

arrow_upward
5
arrow_downward

Согласно документации Angular:

если вы хотите использовать свой фильтр в шаблоне

тогда вам просто нужно ввести его в свой модуль, а затем использовать его вот так {{ expression | filter }} или {{ expression | filter:argument1:argument2:... }} .

документ

если вы хотите использовать свой фильтр в контроллере, директиве и прочем:

внедрить зависимость с именем <filterName>Filter, например:

controller('MyController', ['filterFilter', function(filterFilter) {}]);

документ

так что для этого конкретного случая:

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilterFilter) {

  });
person n00dl3    schedule 19.03.2015

arrow_upward
2
arrow_downward

вы не упомянули, находится ли он в производстве или на локальном сервере, но на всякий случай вы минимизируете свои файлы, попробуйте следующее:

angular.module('equiclass.controllers')
  .controller('CourseCtrl', ['$scope', 'testFilter', function ($scope, testFilter) {

  }]);
person Nuriel    schedule 16.06.2014