Использование углового фильтра как функции внутри директивы

У меня была функция (shortenNum), которая «сокращает» число, добавляя к нему «K» или «M» и удаляя нули. Я решил превратить его в фильтр, потому что я использую Angular.

Фильтр / функция должны применяться внутри директивы, а не в разметке. Я ввел сам фильтр внутри директивы, но сама функция, когда я пытаюсь ее использовать, выдает ошибку:

Ошибка: [$ injector: unpr] Неизвестный провайдер: shortNumProvider ‹- shortNum‹ - d3PieDirective http://errors.angularjs.org/1.2.10/ $ injector / unpr? p0 = shortNumProvider% 20% 3C-% 20shortenNum% 20% 3C-% 20d3PieDirective ...

Директива:

myApp.directive('d3Pie', [
  '$window', 
  'd3Service', 
  'shortenNum',
  function($window, d3Service, shortenNum) {
  return {
    ...

  // eventually call
  return shortenNum(d.data.count);

Фильтр:

// Rewrites a given number in a shorthand form
myApp.filter('shortenNum', function(num) {
  if(num > 99999) { return (num/1000000).toFixed(1) + 'M'; }
  if(num > 999) { return (num/1000).toFixed(1) + 'K'; }
  return num;
});

Во-первых. Это вообще то, как следует использовать фильтры?

Во-вторых: Если да, то в чем моя синтаксическая / концептуальная ошибка?


javascript angularjs angularjs-directive angular-filters
person sir_thursday    schedule 07.07.2014    source источник
comment
где объявление фильтра? Не кажется действительным, так как ошибка связана с его инъекцией.   -  person charlietfl    schedule 07.07.2014
comment
упс, мне нужно объявление фильтра? Это похоже на $filter, введенный в директиву?   -  person sir_thursday    schedule 07.07.2014
comment
добавил мой фильтр, не совсем уверен, что вы спрашиваете ...   -  person sir_thursday    schedule 07.07.2014
comment
Да, что-то не так с инъекцией, не знаю почему. Это filter() объявление - вот о чем я говорил   -  person charlietfl    schedule 07.07.2014
comment
@zelliott вставляет сам сервис $filter в вашу директиву d3Pie, а затем вы можете вызвать свой shortenNum фильтр в форме: $filter('shortenNum')(array, expression, comparator).   -  person miqh    schedule 07.07.2014
comment
filter() действительно должен возвращать функцию. См. Пример фильтра в обучающей документации здесь docs.angularjs.org/tutorial/step_09   -  person charlietfl    schedule 07.07.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я опубликовал 2 способа использования фильтра в этой скрипке:

http://jsfiddle.net/9Ymvt/1844/

Использование фильтра в директиве или сервисе вполне допустимо, но вам нужно вставить фильтр в директиву. Вы можете ввести $filter, но, поскольку требуется только то, что вам нужно, вероятно, лучше ввести отдельный фильтр следующим образом:

angular.module('components', [])
    .directive('controllerFilter', function (shortNumFilter) {
    return {
        restrict: 'E',
        scope:{
            num:'@'
        },
        template: '<span>controllerFilter: {{ filteredNum }}</span>',
        controller: function ($scope, $element, $attrs) {
            $scope.$watch('num', function(newVal, oldVal) {
                $scope.filteredNum = shortNumFilter(newVal);
            })
        }
     }
})
person Dan Caddigan    schedule 07.07.2014