依赖注入的angularjs指令使用打字稿 [英] Inject dependency to the angularjs directive using typescript

问题描述

可以说我有一个简单的角度指令看起来像这样：

Lets say I have a simple angular directive that looks like this:

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

我怎么可以这样写使用打字稿，并获得$超时的链接函数内入店？我的例子会是这个样子：

How can I write this using Typescript and get the $timeout accesible within the link function? My example would look something like this:

/// <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]);

这可能是一个愚蠢的例子，但它的原理，我想获得工作，这是在角连接功能使用依赖注入

This might be a silly example but it is the principle I would like to get working, which is using injected dependencies in the angular link function.

推荐答案

试试这个方法：

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());

这可能是你所拥有它现在的方式有问题。由于指令厂不newed了这么它的构造函数将与这个作为全局对象执行。这样你最终不会有一个巨大的构造，以及，可以在适当的类写的 EY 的方式。

It could be a problem with the way you have it right now. Because directive factory is not newed up so its constructor will execute with this as global object. This way you don't end up having a huge constructor as well and can write it in proper class ey manner.

如果您有注入，而不是在工厂里重复的论点许多依赖你还可做的：

If you have many dependencies injected instead of repeating the arguments in the factory you could as well do:

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

这篇关于依赖注入的angularjs指令使用打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！