AngularJS指令没有被调用

Posted 2023-02-22

技术标签:

【中文标题】AngularJS指令没有被调用【英文标题】：AngularJS directive not being called 【发布时间】：2014-07-31 19:55:02 【问题描述】：

我正在尝试在 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- bar-padding="5"></d3-bars>

起初我以为它没有附加svg，因为检查它看起来的元素，但现在我认为该指令甚至根本没有运行。我一开始就在里面贴了一个console.log，它也没有出现。我错过了一些简单的东西吗？

编辑：

我尝试将第一行更改为

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

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

【问题讨论】：

这会给你一个错误，因为如果你只在依赖注入数组中注入'd3Service'而不是同时注入 ['$window', 'd3Service' , function($window, d3Service) //代码等] ^^ 完美。您的回答加上 Engima 的效果很好。 【参考方案1】：

您的指令名称可能有误。 Angular 指令通常是驼峰式的。当在 HTML 中时，它们会被炒作。所以ngClass 在 HTML 中变成了ng-class。

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

查看此 Google 群组帖子的有效性：using dash in directive

这里还有文档：Directives - matching directives

您还需要做出 JoshSGman 在 cmets 中建议的更改：

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

【讨论】：

哦...现在我得到“无法读取链接未定义的属性 'd3'”。一个错误...呜呼！您可能还需要做出@JoshSGman 建议的更改。如果您编辑您的答案以归因于@JoshSGman 的评论，我会选择此作为正确答案。这立即帮助了我，与我引用的 Plunkr 示例相比，我与这个问题斗争了一个小时，然后才意识到我执行指令的方式存在根本性错误。谢谢。我真的很想知道为什么它不起作用。所以，我将我的指令精简到最低限度，但仍然没有运气。然后我找到了你的答案！：）非常感谢！ :)【参考方案2】：

你的指令的命名是个问题。 Angular 在将 html 中的指令名称与 javascript 中的名称匹配之前，会对其名称进行规范化。标准化过程分两步进行：

从元素/属性的前面去除 x- 和 data-。将冒号、连字符或下划线分隔的名称转换为驼峰式。

因此，您的指令在 JavaScript 中的正确名称应该是 d3Bars。将其更改为该值，它应该可以工作。

更多信息请参见https://docs.angularjs.org/guide/directive#matching-directives。

【讨论】：

【参考方案3】：

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

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

【讨论】：

【参考方案4】：

发生在我身上的另一件事使该指令根本不起作用

当你有one module 有一个指令和you created a new module 有一个新指令但由于复制粘贴you forget change Module name，这样AngulerJs 不知何故will remove the first directive