Директива AngularJS не называется

Я пытаюсь реализовать директиву d3 в Angular, и это сложно, потому что визуально ничего не происходит, и на консоли не возникают ошибки.

Здесь моя директива d3:

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

// More code below ....

Вот мой HTML:

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

Сначала я подумал, что это не добавление svg, потому что проверка элемента на то, как он выглядит, но теперь я не думаю, что директива даже работает вообще. Я вставил console.log внутри него в самом начале, и он тоже не появился. Я пропустил что-то простое?

EDIT:

Я попытался изменить верхнюю строку на

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

Но это тоже не сработало. Я даже не знаю, в чем разница между двумя заголовками...

Ответы

Ответ 1

Название вашей директивы может быть неправильным. Директивы Angular обычно имеют верблюд. И когда в HTML они загипнотизированы. поэтому ngClass превращается в ng-class в HTML.

По крайней мере, когда я пытался использовать - или другие символы в моих директивах, он не сработал.

Обратите внимание на это сообщение в Google Group за достоверность: используя тире в директиве

Также есть документы: Директивы - соответствующие директивы

Вы также захотите внести изменения, которые были предложены в комментариях JoshSGman:

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

Ответ 2

Именование вашей директивы - проблема. Angular нормализует имена директив в html, прежде чем он сопоставляет их с именами в JavaScript. Процесс нормализации работает в два этапа:

  • Сбросьте x- и данные - из передней части элемента/атрибутов.
  • Преобразуйте имя, обозначенное двоеточием, дефисом или подчёркиванием, в camelCase.

Итак, правильное имя для вашей директивы в JavaScript будет d3Bars. Измените его на это, и он должен работать.

Подробнее см. https://docs.angularjs.org/guide/directive#matching-directives.

Ответ 3

У меня было подобное поведение, когда я забыл определить свойство link.

Нет ошибок в консоли, nothin.