Implémentation des directives angularjs en tant que classes dans Typescript

Après avoir pris un coup d'oeil à certains des exemples de directives angularjs en caractères d'imprimerie, il semble que la plupart des gens sont d'accord pour utiliser des fonctions au lieu de classes lors de leur mise en œuvre.

Je préfère avoir en classe et a tenté de les mettre en œuvre comme suit:

module directives
{    
    export class search implements ng.IDirective
    {        
        public restrict: string;
        public templateUrl: string;

        constructor()
        {            
            this.restrict = 'AE';
            this.templateUrl = 'directives/search.html';
        }

        public link($scope: ng.IScope, element: JQuery, attributes: ng.IAttributes)
        {
            element.text("Hello world");

        }
    }
}

Maintenant cela fonctionne bien. Cependant, j'ai besoin d'avoir un isolé portée avec certains attributs et j'ai du mal à savoir comment l'inclure dans la classe elle-même.

logique dicte que depuis que je peux avoir

public restrict: string;
public templateUrl: string;

Je devrais être en mesure d'avoir quelque chose comme:

public scope;

Mais je ne sais pas si c'est correct ou comment mener à partir de là (j'.e comment ajouter les attributs de la portée).

Ce que quelqu'un sait comment résoudre ce problème? (espérons-le, sans avoir à revenir à une fonction si possible)

Merci,

source d'informationauteur user1435899

  1. 20

    En supposant que ce que vous avez des œuvres sans islolated la portée, les éléments suivants doivent travailler avec un cas isolé portée: 

    module directives
{    
    export class search implements ng.IDirective
    {        
        public restrict = 'AE';
        public templateUrl = 'directives/search.html';
        public scope = {
            foo:'=',
            bar:'@',
            bas:'&'
        };


        public link($scope: ng.IScope, element: JQuery, attributes: ng.IAttributes)
        {
            element.text("Hello world");
        }
    }
}
  2. 22

    La création de directives que les classes peut être problématique parce que vous avez encore le besoin d'impliquer une usine de fonction pour l'envelopper de son instanciation. Par exemple:

    export class SomeDirective implements ng.IDirective {
    public link = () => {
    }

    constructor() {}
}

    Ce qui Ne fonctionne pas

    myModule.directive('someDirective', SomeDirective);

    Depuis les directives ne sont pas appelés à l'aide de "nouveaux" mais qui sont juste appelé comme l'usine de fonctions. Cela va poser des problèmes sur ce que votre constructeur de la fonction renvoie en fait.

    Ce N' (avec des Réserves)

    myModule.directive(() => new SomeDirective());

    Cela fonctionne bien à condition que vous n'avez pas de Cio impliqués, mais une fois que vous commencer à introduire les injectables, vous devez conserver des listes de paramètres pour votre usine de fonction et de votre directive constructeur. 

    export class SomeDirective implements ng.IDirective {
    ...
    constructor(someService: any) {}
}

myModule.directive('someDirective', ['someService', (someService) => new SomeDirective(someService)]);

    Toujours une option si c'est ce que vous préférez, mais il est important de comprendre comment la directive enregistrement est en fait consommée.

    Une approche alternative

    La chose qui est effectivement prévu par angulaire est une directive de l'usine de la fonction, donc quelque chose comme:

    export var SomeDirectiveFactory = (someService: any): ng.IDirective => {
   return {
     link: () => {...}
   };
}
SomeDirectiveFactory.$inject = ['someService']; //including $inject annotations

myModule.directive('someDirective', SomeDirectiveFactory);

    Cela a l'avantage de permettre l'utilisation de $injecter des annotations depuis angulaire a besoin d'elle pour être sur de l'usine de la fonction dans ce cas.

    Vous pouvez toujours retourner une instance de votre classe à partir de l'usine de la fonction ainsi:

    export var SomeDirectiveFactory = (someService: any): ng.IDirective => {
   return new SomeDirective(someService);
}
SomeDirectiveFactory.$inject = ['someService']; //including $inject annotations

    Mais dépend vraiment de votre cas d'utilisation, la façon dont beaucoup de duplication de listes de paramètres que vous êtes d'accord avec, etc.

  3. 2

    Voici ma proposition:

    Directive:

    import {directive} from '../../decorators/directive';

@directive('$location', '$rootScope')
export class StoryBoxDirective implements ng.IDirective {

  public templateUrl:string = 'src/module/story/view/story-box.html';
  public restrict:string = 'EA';
  public scope:Object = {
    story: '='
  };

  public link:Function = (scope:ng.IScope, element:ng.IAugmentedJQuery, attrs:ng.IAttributes):void => {
    //console.info(scope, element, attrs, this.$location);
    scope.$watch('test', () => {
      return null;
    });
  };

  constructor(private $location:ng.ILocationService, private $rootScope:ng.IScope) {
    //console.log('Dependency injection', $location, $rootScope);
  }

}

    Module (registres de la directive...): 

    import {App} from '../../App';
import {StoryBoxDirective} from './../story/StoryBoxDirective';
import {StoryService} from './../story/StoryService';

const module:ng.IModule = App.module('app.story', []);

module.service('storyService', StoryService);
module.directive('storyBox', <any>StoryBoxDirective);

    Décorateur (ajoute injecter et de produire de la directive de l'objet):

    export function directive(...values:string[]):any {
  return (target:Function) => {
    const directive:Function = (...args:any[]):Object => {
      return ((classConstructor:Function, args:any[], ctor:any):Object => {
        ctor.prototype = classConstructor.prototype;
        const child:Object = new ctor;
        const result:Object = classConstructor.apply(child, args);
        return typeof result === 'object' ? result : child;
      })(target, args, () => {
        return null;
      });
    };
    directive.$inject = values;
    return directive;
  };
}

    Je pense, sur le déplacement de module.directive(...)module.service(...) pour les classes de fichiers par exemple StoryBoxDirective.ts mais ne pas prendre de décision et refactoriser encore 😉

    Vous pouvez vérifier de travail complète, exemple ici: https://github.com/b091/ts-skeleton

    Directive est ici: https://github.com/b091/ts-skeleton/blob/master/src/module/story/StoryBoxDirective.ts