Fonction de lien de la directive AngularJS TypeScript

Je suis en train de créer un AngularJS directive à l'aide de caractères d'imprimerie. Mon directive exige "ngModel" et je suis également en utilisant un service personnalisé injecté dans mon directive.
Mon principal problème est que mon service ne peut pas être utilisé à l'intérieur de ma fonction de lien.

Voici un exemple de ce que je suis en train de réaliser:

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
            }
        }
    }
}

Je n'arrive pas à trouver certaines des choses plus avancées sur ce sujet. Tous les exemples ne puis-je pas trouver ne semble pas recours à des services ou d'un lien complexe de la fonction.
Veuillez répondre à cette question avec une certaine sorte d'exemple. C'est la ruse que vous le pensez.

Mise à jour: Le fait que "ceci" à l'intérieur de ma fonction de lien est une fenêtre et non pas "MyDirective' n'a pas beaucoup de sens pour moi. Toutes les idées, pourquoi ce serait?

source d'informationauteur user1613512

  1. 16

    Classes de l'excellent travail pour les contrôleurs et les contrôleurs de la directive, mais je ne pense pas que j'utiliserais un pour l'ensemble de la directive. Mais si vous voulez, vous auriez probablement faire quelque chose comme ceci:

    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
        }
    }
}

    EDIT: Sans classe que vous pourriez faire quelque chose comme ceci:

    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();
            }
        }
    }
);
  2. 21

    À l'aide de classes et d'hériter de la ng.IDirective est le chemin à parcourir avec des caractères d'imprimerie.

    Tapuscrit inclut le support pour la graisse flèche fonction () => de EcmaScript 6.
    C'est une abréviation de la syntaxe qui change également la façon dont le this mot clé fonctionne:

    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) => {
        console.log(this); //this points to MyDirective instance instead of Window

        elem.bind('blur', (evt: JQueryEventObject) => {
            console.log(this); //this points to MyDirective instance instead of Window
            this.validate(); 
        });
    }

    validate() {
        console.log(this); //this points to MyDirective instance instead of Window
    }


    static factory(): ng.IDirectiveFactory {
        var directive = (myFactory: app.services.MyFactory) => new MyDirective(myFactory);
        directive.$inject = ['myFactory'];
        return directive;
    }
}

app.directive('mydirective', MyDirective.factory());

    Vous pouvez également compter sur la vieille mode var self = this; modèle:

    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) => {
        console.log(this); //this points to MyDirective instance instead of Window

        var self = this;

        function validate() {
            console.log(self); //self points to MyDirective instance
        }

        elem.bind('blur', function(evt: JQueryEventObject) {
            console.log(self); //self points to MyDirective instance
            validate(); 
        });
    }
}

    Liées réponse: https://stackoverflow.com/a/29223535/990356