使用打字稿将依赖项注入angularjs指令

小编典典

使用打字稿将依赖项注入angularjs指令

angularjs

可以说我有一个简单的angular指令，如下所示：

app.directive('setFocus', ['$timeout', function($timeout) {
return {
    restrict: 'AC',
    link: function(_scope, _element) {
        $timeout(function() {
            _element[0].focus();
        }, 0);
    }
};
}]);

如何使用Typescript编写此代码并在链接函数中获得$ timeout可访问的权限？我的示例如下所示：

/// <reference path="../../reference.ts"/>

class SetFocus{
    constructor() {
        var directive: ng.IDirective = {};
        directive.restrict = 'EA';
        directive.scope = { };        
        directive.link= function ($scope, $element, $attrs) {
        // How can I access $timeout here?

        }
        return directive;
    }
}

directives.directive('setFocus', [SetFocus]);

这可能是一个愚蠢的示例，但这是我想开始使用的原理，它是在角度链接函数中使用注入的依赖项。

阅读 197

2020-07-04

共1个答案

小编典典

尝试这种方式：

class SetFocus implements ng.IDirective {
    //Directive settings
    restrict :string = 'EA';
    scope : any= {};
    //Take timeout argument in the constructor
    constructor(private $timeout: ng.ITimeoutService) {
    }

    link: ng.IDirectiveLinkFn = ($scope: ng.IScope, $element: ng.IAugmentedJQuery, $attrs: ng.IAttributes) => {
          //refer to the timeout
          this.$timeout(function() {
            $element[0].focus();
         }, 0);
    }
    //Expose a static func so that it can be used to register directive.
    static factory(): ng.IDirectiveFactory {
       //Create factory function which when invoked with dependencies by
       //angular will return newed up instance passing the timeout argument
        var directive: ng.IDirectiveFactory = 
              ($timeout:ng.ITimeoutService) => new SetFocus($timeout);
        //directive's injection list
        directive.$inject = ["$timeout"];
        return directive;
    }
}

directives.directive('setFocus', SetFocus.factory());

您现在拥有的方式可能有问题。由于未更新指令工厂，因此其构造函数将this作为全局对象执行。这样，你就不会最终有一个巨大的构造函数，还可以以适当的类写
安永方式。

如果您注入了许多依赖关系，而不是在工厂中重复这些参数，则可以执行以下操作：

  var directive: ng.IDirectiveFactory =
            (...args) => new (SetFocus.bind.apply(SetFocus, [null].concat(args)));

2020-07-04