未调用 AngularJS 指令 [英] AngularJS directive not being called

问题描述

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

I'm trying to implement a d3 directive in Angular, and it's hard because visually nothing is happening, and no errors are being thrown on the console.

这是我的 d3 指令:

Here's my d3 directive:

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 并且它也没有出现.我错过了一些简单的东西吗?

At first I thought it wasn't appending an svg, because inspecting the element that's what it looks like, but now I don't think the directive is even running at all. I stuck a console.log inside of it at the very beginning and it didn't appear either. Am I missing something simple?

我尝试将顶行更改为

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

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

But that didn't work either. I don't even know what's the difference between the two headers anyway...

推荐答案

您的指令名称可能有误.Angular 指令通常是驼峰式的.当在 HTML 中时，它们是连字符的.所以 ngClass 在 HTML 中变成了 ng-class.

Your directive name may be wrong. Angular directives are commonly camel-cased. And when in the HTML they are hypenated. so ngClass turns into ng-class in the HTML.

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

At least when I've tried to use - or other characters in my directives it hasn't worked.

查看此 Google Group 帖子以了解一些有效性:在指令中使用破折号

Check out this Google Group post for some validity: using dash in directive

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

您还需要进行 JoshSGman 在评论中建议的更改:

You'll also want to make the change that was suggested in the comments by JoshSGman:

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

这篇关于未调用 AngularJS 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！