AngularJS指令不被稱爲

我想在Angular中實現一個d3指令，而且很難，因爲在視覺上沒有任何事情發生，並且在控制檯上沒有錯誤發生。AngularJS指令不被稱爲

這裏是我的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) {

但是，這也不能工作。我甚至不知道這兩個標頭之間有什麼區別...

來源

2014-06-10 sir_thursday

這是否給你一個錯誤，因爲如果你只是在依賴注入數組中注入'd3Service'而不是注入''window'，'d3Service'，函數（$ window ，d3Service）{// code etc}] – JoshSGman

^^完美。你的答案加上Engima的工作很好。 –

您的指令名稱可能是錯誤的。角度指示通常是駱駝式的。而當他們在HTML中被炒作。所以ngClass在HTML中變成ng-class。

至少當我試圖在我的指令中使用-或其他字符時，它不起作用。

看看這個谷歌集團職位一定的正確性：using dash in directive

而且這裏的文檔：Directives - matching directives

您還需要使這是在評論由JoshSGman建議的變化：

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

來源

2014-06-10 21:54:28 EnigmaRM

哦......現在我得到「無法讀取鏈接未定義的屬性'd3'」。錯誤...嗚呼！ –

您可能還需要進行@JoshSGman建議的更改。 – EnigmaRM

如果您編輯屬性@JoshSGman的評論的答案，我會選擇這個作爲正確的答案。 –

您的指令的命名是問題。在將它們與JavaScript中的名稱進行匹配之前，Angular將html中指令的名稱標準化。標準化過程分兩步進行：

從元素/屬性的前面剝離x-和data-。
將冒號，連字符或下劃線分隔的名稱轉換爲camelCase。

因此，您的指令在JavaScript中的正確名稱是d3Bars。改變它，它應該工作。

請參閱https://docs.angularjs.org/guide/directive#matching-directives瞭解更多信息。

來源

2014-06-10 22:01:37 Nikolas

當我忘記定義link屬性時，我有類似的行爲。

在控制檯沒有錯誤，沒什麼。

來源

2016-02-12 00:27:06 GraehamF

AngularJS指令不被稱爲

回答

相關問題