Question

我目前正在开发自定义指令，该指令将为输入元素创建掩码。整个应用程序均采用基于组件的样式编码，因此每个单独的组件，指令和过滤器都是这样编写的。我需要将$ filter服务注入到该指令中，因为在它中间的某个地方，我需要使用已经制作好的过滤器来格式化字符串。不幸的是，我注入$ filter的方法不起作用，并且不断出现错误：

未捕获的错误：[$ injector：modulerr]由于以下原因而无法实例化模块foo：
  错误：[$ injector：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'];
  }

然后我打算使用this。$ filter（'someFilter'）（someVar）来过滤someVar。

但是，上述注入会导致我在问题开始时发布的错误。真的不知道如何注入服务，而不重新设计整个指令-这不是我想要的解决方案。

感谢最终的帮助。

Answer 1

您不需要将$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);

Answer 2

使用类定义指令时，请使用$inject Property Annotation注入依赖项：

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 on PLNKR

如何在基于组件的AngularJS应用中将$ filter服务注入自定义指令

2 个答案: