Directive AngularJS Typescript
De la difficulté à créer imbriquée directive à l'aide de caractères d'imprimerie. Je peux le faire en simple AngularJs:
http://plnkr.co/edit/UruTqEdMnqNT5wjxcQNC?p=preview ,
mais l'utilisation de la Machine, il me donne "Pas de contrôleur" message d'erreur.
///<reference path="../../Scripts/AngularJs/Typings/angular.d.ts" />
export class directiveA {
public static $inject: Array<string> = [];
constructor() {
var directive: ng.IDirective = {};
directive.priority = 0;
directive.restrict = "A";
directive.scope = {};
directive.transclude = true;
directive.templateUrl = "otherTemplate.html";
directive.replace = true;
directive.controller = function ($scope, $element) {
this.flip = function () {
$element.toggleClass("flipped");
}
}
directive.replace = true;
return directive;
}
}
export class directiveB{
public static $inject: Array<string> = [];
constructor() {
var directive: ng.IDirective = {};
directive.require = "^directiveA";
directive.priority = 1;
directive.restrict = "A";
directive.scope = {
simplrSide : "@"
};
directive.transclude = true;
directive.templateUrl = "templeUrl.html";
directive.link = function (scope, iElement, iAttrs, simplrEditable) {
scope.flip = function () {
simplrEditable.flip();
}
}
directive.replace = true;
return directive;
}
}
Je ne sais pas si c'est pertinent, mais je suis en utilisant AMD Require.JS pour le script de chargement
source d'informationauteur Algimantas Krasauskas
Vous devez vous connecter pour publier un commentaire.
En supposant que vous vous inscrivez comme :
Qui devrait fonctionner aussi longtemps que votre code html ressemble à:
Un couple de notes au-delà: les
Utiliser les fonctions de votre directive définitions.
C'est parce que les directives (à la différence des contrôleurs) sont appelés sans
new
de l'opérateur. Donc, si vous avez quelque chose comme:Il compile à incorrect javascript. Comme le Test de la fonction est appelée sans que le nouvel opérateur et cela signifie que
this
se réfère àwindow
et non une instance de la classe. Donc vous ne pouvez pas utiliser quoi que ce soit définie en dehors de l'constructeur de toute façon. Je recommande quelque chose comme:De cette façon, la machine sera aider vous écrivez bon javascript angulaire au lieu de vous diriger dans la mauvaise direction. Je vais faire une vidéo à ce sujet à un point
De l'utilisation des classes pour votre contrôleur de
Les contrôleurs à l'intérieur de directives sont également appelé avec l'opérateur new. De même que les contrôleurs de l'extérieur : http://www.youtube.com/watch?v=WdtVn_8K17E de Nouveau laisser tapuscrit vous aider, avec le sens de l'
this
à l'intérieur du contrôleur de définition. De Plus, vous pouvez utiliser le type pour le contrôleur dans l'enfant de la directive quelque chose comme (pour typesafety et de l'inférence):Pour l'injection dans la directive fonctions
- Je encore utiliser $injecter. J'ai la suite de la définition de l'interface :
Cela signifie que vous pouvez faire :
Le problème n'est pas lié à la Machine, mais à AngularJS Directives.
Changer templateUrl à modèle et à l'aide de code en ligne, aide à résoudre les erreurs. C'est AngularJS Question, plus sur cela: https://github.com/angular/angular.js/issues/1903
Espère qu'ils vont résoudre ce problème dans le futur!
Avec ma solution, vous pouvez utiliser un TS de la classe et de ne pas avoir à s'inquiéter d'une usine et de répéter ce que vous avez besoin injecté.
Pour vous inscrire:
Et le HTML pour voir l'image entière (templateUrl):
un moyen simple d'écrire la directive en ts
Je pense peut travailler avec imbriqué directive ainsi