没有调用AngularJS指令

AngularJS directive not being called

本文关键字：指令 AngularJS 调用      更新时间：2023-09-26

我试图在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) {

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

您的指令名称可能是错误的。Angular指令通常是驼峰式的。在HTML中，它们是用连字符分隔的。所以ngClass在HTML中变成了ng-class。

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

查看这篇Google群组文章，了解一些有效性:在指令

中使用破折号

这里还有docs:指令-匹配指令

你也会想要做JoshSGman在评论中建议的修改:

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

指令的命名是问题所在。Angular会在html中对指令名进行规范化，然后再将它们与JavaScript中的名称进行匹配。规范化过程分为两个步骤:

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

所以，你的指令在JavaScript中的正确名称将是d3Bars。把它改成这个，它应该可以工作了。

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

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

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

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

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

相关文章：