AngularJS打字稿指令链接功能

问题描述

我试图创建一个使用打字稿一个AngularJS指令。我的指令要求ngModel'，我也用我的指令注入了定制服务。
我的主要问题是，我的服务可以不是我的链接功能内部使用。

I'm trying to create an AngularJS directive using TypeScript. My directive requires 'ngModel' and I'm also using a custom service injected in my directive.My main problem is that my service can't be used inside my link function.

下面是我想要达到一个例子：

Here is an example of what I'm trying to achieve:

module app.directives {

    export var directiveName: string = "theDirective";

    angular.module("myApp").directive(directiveName,
           (myFactory: app.services.MyFactory) =>
           {
                return new MyDirective(myFactory);
           });

    export interface IMyDirectiveScope extends ng.IScope {
        ngModel: ng.INgModelController;
    }

    export class MyDirective implements ng.IDirective {

        restrict = "A";
        require = "ngModel";
        scope = {
            ngModel:'='
        }

        constructor(private myFactory: app.services.MyFactory) {

        }


        link(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) {
            //this is window here

            elem.bind('blur', (evt: JQueryEventObject) => {
                 //keyword this is also window here, so yeah bummer indeed
                 validate();
            });

            function validate() {
                 //I need to use my factory here, but I can seem to get it.
                 //this is always window and I'm kinda stuck here
            }
        }
    }
}

我似乎无法找到关于此主题的一些更高级的东西。所有的例子不，我觉得不似乎使用服务或一个复杂的链接功能。
请回答有一些例子这个问题。这是挂羊头卖狗肉，你认为。

I can't seem to find some more advanced stuff on this topic. All the examples don't I find don't seem to uses services or a complex link function.Please answer this question with some sort of example. It's trickery that you think.

更新：'这'里面我的链接功能窗口，而不是MyDirective没有多大意义，我的事实。任何想法，为什么这会是什么？

Update: The fact that 'this' inside my link function is window and not 'MyDirective' doesn't make much sense to me. Any ideas why that would be?

推荐答案

类工作带来极大的控制器和指令的控制器，但我不认为我会用一个整个指令。但是，如果你想你可能必须做这样的事情：

Classes work great for controllers and directive controllers but I don't think I'd use one for the whole directive. But if you want to you'd probably have to do something like this:

export class MyDirective implements ng.IDirective {

    public link;

    restrict = "A";
    require = "ngModel";
    scope = {
        ngModel:'='
    }

    constructor(private myFactory: app.services.MyFactory) {
        this.link = this.unboundLink.bind(this);
    }


    unboundLink(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) {
        //Now you should be able to access myFactory
        this.myFactory.doSomething();

        elem.bind('blur', (evt: JQueryEventObject) => {
             //keyword this is also window here, so yeah bummer indeed
             validate();
        });

        function validate() {
             //I need to use my factory here, but I can seem to get it.
             //this is always window and I'm kinda stuck here
        }
    }
}

编辑：没有一类，你可以做这样的事情：

Without a class you could do something like this:

angular.module("myApp").directive("theDirective",
    function(myFactory: app.services.MyFactory) {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {'ngModel': '='},
            link: function(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) {
                //You can access myFactory like this.
                myFactory.doSomething();
            }
        }
    }
);

这篇关于AngularJS打字稿指令链接功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！