假设我有一个简单的 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]);
这可能是一个愚蠢的例子,但这是我想要开始工作的原则,即在 Angular 链接函数中使用注入(inject)的依赖项。
最佳答案
试试这个方法:
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
作为全局对象执行。这样,您最终也不会拥有庞大的构造函数,并且可以以适当的类ey 方式编写它。
如果您注入(inject)了许多依赖项而不是在工厂中重复参数,您也可以这样做:
var directive: ng.IDirectiveFactory =
(...args) => new (SetFocus.bind.apply(SetFocus, [null].concat(args)));
关于angularjs - 使用 typescript 注入(inject)对 angularjs 指令的依赖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30878157/