AngularJS指令没有被调用

Question

我正在尝试在Angular中实现d3指令，这很困难，因为在视觉上什么也没有发生，并且在控制台上没有抛出任何错误。

这是我的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开始就将其嵌入其中，也没有出现。我缺少简单的东西吗？

编辑：

我尝试将顶行更改为

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

但这也不起作用。我什至不知道两个标题之间有什么区别…

Answer 1

您的指令名称可能不正确。Angular指令通常是驼峰式的。而当使用HTML时，它们会杂乱无章。因此ngClass变成ng-class了HTML。

至少当我尝试-在指令中使用或其他字符时，它没有起作用。

查看此Google
Group帖子的有效性：在指令中使用破折号

这也是docs：指令-匹配指令

您还需要进行JoshSGman的注释中建议的更改：

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