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
Vous devez vous connecter pour publier un commentaire.
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:
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:
Ce qui Ne fonctionne pas
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)
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.
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:
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:
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.
Voici ma proposition:
Directive:
Module (registres de la directive...):
Décorateur (ajoute injecter et de produire de la directive de l'objet):
Je pense, sur le déplacement de
module.directive(...)
module.service(...)
pour les classes de fichiers par exempleStoryBoxDirective.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