wake-up-neo.net

AngularJS-Direktive wird nicht aufgerufen

Ich versuche, eine D3-Direktive in Angular zu implementieren, und das ist schwierig, weil visuell nichts passiert und keine Fehler auf die Konsole geworfen werden.

Hier ist meine D3-Direktive:

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

// More code below ....

Hier ist mein HTML:

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

Zuerst dachte ich, dass es keine svg anhängt, weil das Element so aussieht, wie es aussieht, aber jetzt glaube ich nicht, dass die Direktive überhaupt läuft. Ich habe ganz am Anfang einen console.log hineingesteckt und er ist auch nicht erschienen. Fehlt mir etwas einfaches?

BEARBEITEN:

Ich habe versucht, die obere Zeile zu ändern 

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

Das hat aber auch nicht funktioniert. Ich weiß nicht mal, was der Unterschied zwischen den beiden Headern ist ...

javascriptangularjssvgd3.js
19
sir_thursday

Der Name Ihrer Anweisung ist möglicherweise falsch. Angular Direktiven sind im Allgemeinen in Kamelgehäusen angeordnet. Und wenn in der HTML werden sie hypeniert. ngClass wird im HTML-Code zu ng-class.

Zumindest wenn ich versucht habe, - oder andere Zeichen in meinen Anweisungen zu verwenden, hat es nicht funktioniert.

In diesem Google-Gruppenbeitrag finden Sie einige Gültigkeiten: mit Bindestrich in der Direktive

Auch hier sind die Dokumente: Direktiven - Übereinstimmende Direktiven

Sie möchten auch die Änderung vornehmen, die in den Kommentaren von JoshSGman vorgeschlagen wurde:

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

die Benennung Ihrer Direktive ist das Problem. Angular normalisiert die Namen von Anweisungen in der HTML-Datei, bevor sie mit den Namen in JavaScript abgeglichen werden. Der Normalisierungsprozess läuft in zwei Schritten ab:

  1. Entfernen Sie x- und data- von der Vorderseite des Elements/der Attribute.
  2. Konvertieren Sie den durch Doppelpunkt, Bindestrich oder Unterstrich getrennten Namen in camelCase.

Der korrekte Name für Ihre Direktive in JavaScript lautet also d3Bars. Ändern Sie es und das sollte funktionieren.

Weitere Informationen finden Sie unter https://docs.angularjs.org/guide/directive#matching-directives .

10
Nikolas

Ich hatte ein ähnliches Verhalten, als ich vergaß, die link-Eigenschaft zu definieren.

Keine Fehler in der Konsole, nichts.

0
GraehamF