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在HTML中变为ng-class。

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

查看此Google网上论坛帖子的有效性：using dash in directive

此处还有文档：Directives - matching directives

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

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

Answer 2

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

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

因此，JavaScript中指令的正确名称为d3Bars。把它更改为它，它应该工作。

有关详细信息，请参阅https://docs.angularjs.org/guide/directive#matching-directives。

Answer 3

当我忘记定义link属性时，我有类似的行为。

控制台没有错误，没什么。

Answer 4

我发生了另一件事，使该指令根本不起作用

当您有one module个指令和you created a new module一个新指令时，由于复制粘贴you forget change Module name，这种方式AngulerJs以某种方式will remove the first directive

如此

确保每个模块都有唯一的名称

AngularJS指令未被调用

4 个答案: