Estoy tratando de implementar un d3 directiva en Angular, y es difícil porque visualmente no está pasando nada, y no hay errores están siendo lanzados en la consola.

Aquí está mi d3 directiva:

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

//More code below ....

Aquí está mi código HTML:

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

Al principio pensé que no era anexar un svg, porque inspeccionar el elemento que es lo que parece, pero ahora no creo que la directiva está funcionando en absoluto. Me quedé un console.log dentro de él al principio y no aparece tampoco. Me estoy perdiendo algo simple?

EDICIÓN:

He intentado cambiar la línea superior para

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

Pero que no funciona tampoco. Ni siquiera sé cuál es la diferencia entre las dos cabeceras de todos modos…

  • Se esta dando un error, porque yo esperaría un error si sólo estás inyectando ‘d3Service’ en la matriz de la inyección de dependencia frente a inyectar tanto [‘$ventana’, ‘d3Service’, function($ventana, d3Service) {//el código, etc}]
  • ^^ Perfecto. Su respuesta plus Enigma del gran trabajo.
InformationsquelleAutor sir_thursday | 2014-06-10

3 Comentarios

  1. 54

    Su nombre de la directiva, puede ser malo. Angular directivas son comúnmente grafía camel. Y cuando en el HTML son hypenated. así ngClass se convierte en ng-class en el HTML.

    Al menos cuando he intentado utilizar - o de otros personajes de mi directivas no ha funcionado.

    Echa un vistazo a este Grupo de Google post para algunos validez: el uso de guión en la directiva

    También aquí son los docs: Las directivas de la coincidencia de las directivas

    Usted también querrá hacer el cambio que se ha sugerido en los comentarios por JoshSGman:

    .directive('d3Bars',['$window', 'd3Service', function($window, d3Service) {
    • Ohh… ahora me sale «No se puede leer la propiedad ‘d3’ undefined en el enlace». Un error… woo hoo!
    • Probablemente también necesite para realizar el cambio que @JoshSGman sugerido así.
    • Si edita tu respuesta para el atributo @JoshSGman el comentario, voy a seleccionar como la respuesta correcta.
    • Esto me ayudó de inmediato, yo estaba luchando con este problema durante una hora antes de darse cuenta de que había algo fundamentalmente erróneo en la forma en que he implementado mi directiva, en comparación con un Plunkr ejemplo que se hace referencia. Gracias.
    • Yo realmente me estaba preguntando por qué no funcionó. Así que, he despojado de mi directiva a un mínimo, pero todavía no tuvo suerte. Luego me enteré de tu respuesta! 🙂 Muchas gracias! 🙂
    • Mi problema era que el yo estaba usando subrayado _ en el nombre de la directiva, que no funciona
    • Mientras yo estaba luchando con el más difícil de los problemas de dependencia que me estaba perdiendo lo obvio: un carácter de guión en mi nombre de la directiva 🙁

  2. 10

    la nomenclatura de su directiva es el problema. Angular normaliza los nombres de las directivas en el código html antes de que les corresponda a los nombres en JavaScript. El proceso de normalización de las obras en dos pasos:

    1. Tira x – y – de-datos de la parte frontal del elemento/atributos.
    2. Convertir los dos puntos, guión, guión bajo o delimitado por nombre a camelCase.

    Así, el nombre correcto de la directiva en JavaScript sería d3Bars. El cambio es que se debe trabajar.

    Ver https://docs.angularjs.org/guide/directive#matching-directives para obtener más información.

  3. 0

    He tenido un comportamiento similar cuando se me olvidó definir el link propiedad.

    Que No hay errores en la consola, nada.

Dejar respuesta

Please enter your comment!
Please enter your name here