Bonjour à tous,
Depuis peu après 3 ans sous angular premier du nom j'ai déçidé de me lancer sur Angular2.
Je rencontre un soucis dans la création d'une directive. Je voudrais récupérer un élément en paramètre et après suivis la documentation je ne comprend pourquoi cette élément reste toujours undefined .
Voici le template html
<div id="calculatorModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" [draggable]="calculatorModal">
</div>
</div>
</div>
en gros dans ma directive draggable je voudrais récupérer sous un string pour avoir un ID de div soit un refElement parent.
Dans ma directive j'ai cette élément pour récupérer la valeur passer en paramètre.
import { Directive, ElementRef, Input, Renderer,HostListener } from '@angular/core';
@Directive({
selector: '[draggable]'
})
export class DraggableDirective {
constructor(private el: ElementRef, private renderer: Renderer) {}
//Get ID of drag element for update the offset position
@Input('draggable') idDrag: string;
@HostListener('dragover') onDragOver() {
console.log(this.idDrag);
}
}
La directives fonctionne à bien été déclarée etc... mais la valeur de mon idDrag ne s'intialise pas . Auriez vous une piste ? je ne comprend pas le soucis puisque j'ai suivie la documentation offociel pour créer cette directive et le code est quasiment identique.
Merci beaucoup pour votre aide.
Dans la Template écrire
<div class="modal-header" [draggable]="'calculatorModal'">
Tel que tu l'as initialisé [draggable]="calculatorModal", ng2 considère que calculatorModal est un objet javascript, d'où l'état undefined.
Il faut, dans ton cas mettre une string: 'calculatorModal', et donc [draggable]=" 'calculatorModal' ".
Une autre solution, je pense, serait d'écrire
<div class="modal-header" draggable="calculatorModal">
Vu que l'attribut draggable n'a pas de raison d'être modifiable. Il est donc inutile de générer un 'bind'.