web-dev-qa-db-ja.com

AngularJSディレクティブが呼び出されない

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) {

しかし、それもうまくいきませんでした。とにかく、2つのヘッダーの違いはわかりません...

javascriptangularjssvgd3.js
19
sir_thursday

ディレクティブ名が間違っている可能性があります。 Angularディレクティブは通常、キャメルケースです。HTMLの場合はハイフンが付けられるため、HTMLではngClassはng-classに変わります。

少なくとも、ディレクティブで-またはその他の文字を使用しようとしても、機能しません。

妥当性については、このGoogleグループの投稿を確認してください： ディレクティブでダッシュを使用

また、ここにドキュメントがあります： ディレクティブ-一致するディレクティブ

また、JoshSGmanのコメントで提案された変更を加えることもできます。

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

ディレクティブの名前が問題です。 Angularは、JavaScript内のディレクティブと一致する前に、html内のディレクティブの名前を正規化します。正規化プロセスは2つのステップで機能します。

  1. 要素/属性の前部からx-とdata-を取り除きます。
  2. コロン、ハイフン、またはアンダースコアで区切られた名前をcamelCaseに変換します。

したがって、JavaScriptでのディレクティブの正しい名前はd3Barsになります。それをそれに変更すれば動作するはずです。

詳細は https://docs.angularjs.org/guide/directive#matching-directives を参照してください。

10
Nikolas

ディレクティブがまったく機能しないようにするもう1つのことが起こりました

one moduleにディレクティブがあり、you created a new module新しいディレクティブを使用しますが、コピーと貼り付けが原因ですyou forget change Module name、このようにAngulerJsどういうわけかwillremove the first directive

そう

すべてのモジュールに一意の名前が付いていることを確認してください

0
Basheer AL-MOMANI

linkプロパティを定義するのを忘れたときも、同様の動作がありました。

コンソールにはエラーはありません。

0
GraehamF