web-dev-qa-db-fra.com

La directive AngularJS n'est pas appelée

J'essaie d'implémenter une directive d3 dans Angular, et c'est difficile car rien ne se passe visuellement et aucune erreur n'est générée sur la console.

Voici ma directive d3:

myApp.directive('d3-bars', ['d3Service', function($window, d3Service) {
  return {
    restrict: 'EA',
    scope: {},
    link: function(scope, element, attrs) {

// More code below ....

Voici mon HTML:

<d3-bars bar-height="20" bar-padding="5"></d3-bars>

Au début, j’imaginais qu’il ne s’agissait pas d’ajouter une svg, car l’inspection de l’élément correspond à ce à quoi il ressemble, mais je ne pense pas que la directive fonctionne même du tout. J'ai collé un console.log à l'intérieur tout au début et il n'apparaissait pas non plus. Est-ce que je manque quelque chose de simple?

MODIFIER:

J'ai essayé de changer la ligne du haut pour 

angular.module('myApp.directives', ['d3'])
.directive('d3-bars', ['d3Service', function($window, d3Service) {

Mais cela n'a pas fonctionné non plus. Je ne sais même pas quelle est la différence entre les deux en-têtes de toute façon ...

javascriptangularjssvgd3.js
19
sir_thursday

Votre nom de directive peut être faux. Les directives Angular sont généralement camelées. Et quand dans le HTML, ils sont enivrés. alors ngClass se transforme en ng-class dans le code HTML.

Du moins, lorsque j'ai essayé d'utiliser - ou d'autres caractères dans mes directives, cela n'a pas fonctionné.

Consultez ce message du groupe Google pour une certaine validité: en utilisant un tiret dans la directive

Voici également les documents: Directives - Directives correspondantes

Vous voudrez également apporter la modification suggérée dans les commentaires de JoshSGman:

.directive('d3Bars',['$window', 'd3Service', function($window, d3Service) {
53
EnigmaRM

la dénomination de votre directive est le problème. Angular normalise les noms de directives dans le code HTML avant de les faire correspondre aux noms en JavaScript. Le processus de normalisation fonctionne en deux étapes:

  1. Bande X- et data- de l'avant de l'élément/attributs.
  2. Convertissez le nom délimité par des points, des tirets ou des traits de soulignement en camelCase.

Donc, le nom correct de votre directive en JavaScript serait d3Bars. Changez-le en cela et cela devrait fonctionner.

Voir https://docs.angularjs.org/guide/directive#matching-directives pour plus d'informations.

10
Nikolas

J'ai eu un comportement similaire lorsque j'ai oublié de définir la propriété link.

Aucune erreur dans la console, rien.

0
GraehamF