2016-09-23 8 views
1

次のコードは、定義されたディレクティブからテキストを印刷していないように機能していません:角度JSコメントディレクティブが適切に

<div ng-app="myApp"> 

    <!-- directive: devComment --> 

</div> 


<script> 
    app.directive("devComment", function(){ 
       return{ 

        restrict : "M", 
        replace : true, 
        template : " A comment made this print to html " 

       }; 
      }); 
</script> 
+0

私はコメントディレクティブを使用することを強くお勧めしますが、通常のAngularJSディレクティブの命名規則に従わないようです。また、 'replace'を使う必要があります。これは廃止予定のプロパティです。 – Phil

答えて

1

は、あなたは自分のテンプレート内のディレクティブ名の間違った形式を持っています。するために

:それは

<!-- directive: dev-comment --> 

(実際、私はこれをテストして、コメントディレクティブのために、名前の正規化は非常に現実的な問題は何のルート要素ではなかったが起こるとは思われないED)でなければなりませんreplaceを使用する場合は、テンプレートにルート要素が1つだけ必要です。

angular.module('myApp', []).directive('devComment', function() { 
 
    return { 
 
    restrict: 'M', 
 
    replace: true, 
 
    template: '<span>A comment made this print to html</span>' 
 
    }; 
 
});
<div ng-app="myApp"> 
 
    <!-- directive: dev-comment --> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

+0

これはまだ動作しません – jack

+0

@ジャックええ、私は単一のルート要素を必要とすることについて少し逃しました。コード実行可能な例で修正しました。 OPが正しいディレクティブ名を使用していたとしても、コンソールエラーが発生していました。 – Phil

1

あなたのテンプレートは、正確にあなたのテンプレートの.so docsをチェックelement.Pleaseつのルートはplunker here作業

template : " <p>A comment made this print to html</p> " 

以下のようにする必要がありますしている必要があります。

0
<div ng-app="myApp"> 
    <!-- directive: dev-comment --> 
</div> 
<script> 
    app.directive("devComment", function(){ 
       return{ 
        restrict : "M", 
        replace : true, 
        template : "<h3>A comment made this print to html</h3> " 
       }; 
      }); 
</script> 
+0

ディレクティブメソッドで指定されたディレクティブの名前は、ラクダ文字でなければならず、小文字で始まる必要があります。例:ディレクティブの名前myCustomDirがHTMLのmy-custom-dirになります。 myCustomDirは正規化されたディレクティブ名と呼ばれます。 –