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

您的指令名称可能有误.角度指令通常是骆驼式的.当他们在HTML中他们被夸大了.所以ngClass转入ng-classHTML.

至少当我试图-在我的指令中使用或其他字符时它没有用.

查看此Google论坛帖子的某些有效性:使用dash in指令

这里还有文档:指令 - 匹配指令

您还希望进行JoshSGman评论中建议的更改:

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

Answer 2

命令的命名是问题所在.Angular在将它们与JavaScript中的名称匹配之前规范化html中的指令名称.规范化过程分两步进行:

1. 从元素/属性的前面剥离x-和数据.
2. 将冒号,连字符或下划线分隔的名称转换为camelCase.

因此,JavaScript中指令的正确名称将是d3Bars.把它更改为它,它应该工作.

有关更多信息,请参阅https://docs.angularjs.org/guide/directive#matching-directives.