Как внедрить службу $ filter в пользовательскую директиву в компонентном приложении AngularJS - PullRequest
Новая
       36

Как внедрить службу $ filter в пользовательскую директиву в компонентном приложении AngularJS

0 голосов
/ 27 марта 2019

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

Uncaught Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля foo из-за:
Ошибка: [$ инжектор: modulerr] Не удалось создать экземпляр приложения модуля из-за:
Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля app.common из-за:
Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля inputMaskModule из-за:
Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля $ filter из-за:
Ошибка: [$ injector: nomod] Модуль '$ filter' недоступен! Вы либо неправильно написали имя модуля, либо забыли загрузить его. При регистрации модуля убедитесь, что вы указали зависимости в качестве второго аргумента.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=%24filter

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

Вот код директивы.

inputMask.js, для регистрации кода директивы: 

import angular from 'angular';
import InputMask from './inputMask.directive';

const inputMaskModule = angular.module('inputMaskModule', [])
  .directive('inputMask', () => new InputMask());

export default inputMaskModule;

и inputMask.directive.js, которые содержат код директивы: 

export default class inputMask {
  constructor() {
    this.restrict = 'A';
    this.require = ['ngModel'];
  }

  link($scope, $element, attrs, ngModel) {
    console.log('scope:', $scope, 'element:', $element, 'attrs:', attrs, 'ngModel:', ngModel);

    const ngModelController = ngModel[0];
    // some more code
    $element.bind('focus', focusInput);
    $element.bind('blur', blurInput);
  }
}

Я пытался ввести $ filter следующим образом: 

const inputMaskModule = angular.module('inputMaskModule', ['$filter'])
  .directive('inputMask', ($filter) => new InputMask($filter));

и 

constructor($filter) {
    this.$filter = $filter;
    this.restrict = 'A';
    this.require = ['ngModel'];
  }

и позже я планирую выполнить код $ filter с помощью этого. $ Filter ('someFilter') (someVar) для фильтрации someVar.

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

Спасибо за возможную помощь.

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

При использовании классов для определения директив вводите зависимости, используя $inject Аннотация свойства : 

class myDirective {
  constructor ($filter) {
    this.require= {ngModel: "ngModel"};
    this.$filter = $filter;
  }
  link (scope, elem, attrs, ctrl) {
    console.log(scope);
    console.log(ctrl);
    var ngModelController = ctrl.ngModel;
    console.log("$filter=",this.$filter);
  }
}
myDirective.$inject=["$filter"];

angular.module("app",[])
.directive("myDirective",myDirective)

Служба $ compile создает директивы, являющиеся классами с оператором new изависимости, определенные свойством $inject класса.

DEMO на PLNKR

0 голосов
/ 27 марта 2019

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

export default class inputMask {
  constructor($filter) {
    this.$filter = $filter;
    this.restrict = 'A';
    this.require = ['ngModel'];
  }

  link($scope, $element, attrs, ngModel) {
    ...
  }
}
inputMask.$inject = ["$filter"];

Или, если вы планируете использовать службу $filter в контроллере: 

export default class inputMask {
  constructor() {
    this.restrict = 'A';
    this.require = ['ngModel'];
    this.controller = 'MyController';
  }

  link($scope, $element, attrs, ngModel) {
    ...
  }
}

/*MyController.js*/
export default class MyController {
  constructor($filter) {
    this.$filter = $filter;
  }
  $onInit() {
    console.log(this.$filter('someFilter')(someVar));
  }
}
MyController.$inject = ["$filter"];

/*Be sure to register the controller*/
const inputMaskModule = angular.module('inputMaskModule')
  .controller('MyController', MyController);
...