2

angularJS 1.3.14で 

  var app = angular.module('myApp',[]);
  app.controller('myController',['$scope',function($scope){
	$scope.name = 'world';
  }]);
  //here i created directive of name helloWorld
  app.directive('helloWorld',function(){
    return {
	replace:true,
	restrict:'AE',
	template :'<h3>Hello world<h3/>'
   }
  });
<html ng-app='myApp'>
    <body ng-controller = "myController">
       <hello-world/>
    </body>
</html>
エラー:

エラー: [$compile:tplrt] ディレクティブ 'helloWorld' のテンプレートには、ルート要素が 1 つだけ必要です。

このエラーを解決するにはどうすればよいですか?

4

3 に答える 3

1

クイックフィックス

根本原因( replace: true)

  1. <hello-world></hello-world>
  2. ディレクティブ テンプレートを変更してh3タグを適切に閉じるtemplate :'<h3>Hello world</h3>'

説明

あなたのコードには2つの問題があります。

  1. のようなディレクティブ カスタム要素を閉じる必要があります<hello-world><hello-world/>。タグを閉じないと、最初の出現は正常に機能しますが、その後は残りの部分が機能しなくなります。ここ を参照してください。
  2. その他のことは、ディレクティブのテンプレートが間違っていることですtemplate

ディレクティブ テンプレート

<h3>Hello world<h3/>

する必要があります

<h3>Hello world</h3>

タグを適切<h3>Hello world<h3/>に閉じていないようなディレクティブにテンプレートがあります。h3

h3そのため、2 つの要素を持つ以下のようなページにレンダリングされます。

<h3>Hello world</h3>
<h3></h3>

したがって、render html には個別の 2 つの要素があります。したがって、それらをサービスに渡してテンプレートのコンテンツをコンパイルするときに、テンプレートに単一のルート要素が必要であることを意味する$compileスローであるため、Angular はその要素をコンパイルします。[$compile:tplrt]

于 2015-12-23T09:02:25.390 に答える
0

replace: true をコメントします。

var app = angular.module('myApp',[]);
        app.controller('myController',['$scope',function($scope){
            $scope.name = 'world';
        }]);

//**here i created directive of name helloWorld**
        app.directive('helloWorld',function(){
            return {
                restrict:'AE',
                //replace:true,
                template :'<h3>Hello world<h3/>'
            };
            });

or 

    //**here i created directive of name helloWorld**
            app.directive('helloWorld',function(){
                return {
                    restrict:'AE',
                    replace:true,
                    template :'<div><h3>Hello world<h3/></div>'
                };
                });
于 2015-12-23T08:57:17.573 に答える