我正在尝试在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开始就将其嵌入其中,也没有出现。我缺少简单的东西吗?
svg
console.log
编辑:
我尝试将顶行更改为
angular.module('myApp.directives', ['d3']) .directive('d3-bars', ['d3Service', function($window, d3Service) {
但这也不起作用。我什至不知道两个标题之间有什么区别…
您的指令名称可能不正确。Angular指令通常是驼峰式的。而当使用HTML时,它们会杂乱无章。因此ngClass变成ng-class了HTML。
ngClass
ng-class
至少当我尝试-在指令中使用或其他字符时,它没有起作用。
-
查看此Google Group帖子的有效性:在指令中使用破折号
这也是docs:指令-匹配指令
您还需要进行JoshSGman的注释中建议的更改:
.directive('d3Bars',['$window', 'd3Service', function($window, d3Service) {