コメントとしての角度ディレクティブ

私はAngularJSのドキュメントを参照していますが、「コメントディレクティブ」を実際にはエラーが発生したという方法で動作させることができませんでした。詳細の下に見つけてください：コメントとしての角度ディレクティブ

HTML： -

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script type="text/javascript" src="JS/DirectiveAsComment.js"></script> 
    <title>Directive as Comment</title> 
</head> 
<body ng-app="directiveAsCommentApp"> 
    <!-- directive:test-comment-directive --> 
</body> 
</html>

JS： -

var app = angular.module('directiveAsCommentApp', []); 

app.directive('testCommentDirective', function(){ 
return { 
     restrict: 'M', 
     replace: true, 
     template: 'this text is displayed because of "test-comment-directive" custom directive' 
}; 
});

エラー：[$コンパイル：tplrt]をディレクティブのテンプレート 'testCommentDirective' は、正確に1つのルート要素を持っている必要があります。

私はこの問題を解決してください。..

出典

2017-02-08 GG Arora

When a directive is declared with template (or templateUrl) and replace mode on, the template must have exactly one root element. That is, the text of the template property or the content referenced by the templateUrl must be contained within a single html element. For example, blah blah blah instead of simply blah blah blah. Otherwise, the replacement operation would result in a single element (the directive) being replaced with multiple elements or nodes, which is unsupported and not commonly needed in practice.

変更この

template: 'this text is displayed because of "test-comment-directive" custom directive'

template: '<div>this text is displayed because of "test-comment-directive" custom directive</div>'

にしてください参照： https://docs.angularjs.org/error/ $コンパイル/ tplrt

出典

2017-02-08 06:55:01

問題はいくつかのようなタグやかにそれらを書き、あなたのテンプレートである：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </script> 
     <title>Directive as Comment</title> 
    </head> 
    <body ng-app="myApp"> 
     <!-- directive:test-comment-directive --> 
    </body> 
</html>

とapp.jsでこれをしようとは

var app = angular.module('myApp', []); 

app.directive('testCommentDirective', function(){ 
    return { 
     restrict: "M", 
     replace: true, 
     template: "<div>this text is displayed because of 'test-comment-directive' custom directive</div>" 
      }; 
    });

これを試してみてください

出典

2017-02-08 07:01:50

コメントとしての角度ディレクティブ

答えて

関連する問題