Angular Typescript：无法在控制器中注入 $filter

Question

我在我的指令中使用了一个控制器。我在控制器构造函数中声明了一个函数 (change(searchAttribute: string))，它将在内部使用过滤器，但我收到运行时异常 "this.$filter is not a function"。

我有很多关于 google 的例子，它们以相同的方式注入 $filter 服务，但我无法弄清楚为什么它对我不起作用。

我的代码：

module app.directive {

interface MyDirectiveScope extends ng.IScope {
    myModel: any[];
    change(searchAttribute: string);
}

class MyController {
    static $inject = ['$scope', '$filter'];

    constructor(public $scope: MyDirectiveScope, public $filter: ng.IFilterService) {
        //code

        $scope.change = function (searchAttribute) {
            $scope.myModel = this.$filter('filter')($scope.myModel, searchAttribute); //error : this.$filter turns out to be undefined here
        };
    }
}

class MyDirective implements ng.IDirective {

    static instance(): ng.IDirective {
        return new MyDirective;
    }

    restrict = "E";
    replace = true;
    templateUrl = "myTemplate.html";
    controller = MyController;
    scope = {};
}


angular.module("myModule")
    .directive("myDirective", MyDirective.instance);}

Answer 1

您正在尝试使用 this 作为参考构造函数。但是，在另一个函数中，this 引用更改函数而不是构造函数。在另一个变量之前你需要点构造函数，比如 self.

让我们转到代码：

constructor(public $scope: MyDirectiveScope, public $filter: ng.IFilterService) {
    let self = this;

    $scope.change = function (searchAttribute) {
        $scope.myModel = self.$filter('filter')($scope.myModel, searchAttribute);
    };
}

Answer 2

您可以使用 Typescript arrow functions 将 this 作为上述函数内的 class 实例上下文：

$scope.change = (searchAttribute) => {
    $scope.myModel = this.$filter('filter')($scope.myModel, searchAttribute);
    // Here, this refers to your class instance context
};

Angular Typescript：无法在控制器中注入 $filter

Angular Typescript: Unable to inject $filter in controller

dependency-injection

angularjs

typescript

angularjs-controller

angularjs-filter