I am getting error Error: [$compile:tplrt] while using directive in angularjs

Question

在 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>

错误是：

Error: [$compile:tplrt] Template for directive 'helloWorld' must have exactly one root element.

如何解决这个错误？

Answer 1

评论替换：正确。

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>'
                };
                });

Answer 2

快速修复

根本原因(replace: true)

<hello-world></hello-world>
更改指令模板以正确关闭 h3 标记 template :'<h3>Hello world</h3>'

说明

你的代码有两个问题。

您应该关闭您的指令自定义元素，如 <hello-world><hello-world/>。如果您不关闭标签，第一次出现时会正常工作，但之后的其他部分将不起作用。 See here.
还有就是你的指令模板有误template

指令模板

<h3>Hello world<h3/>

应该是

<h3>Hello world</h3>

您在 <h3>Hello world<h3/> 等指令中有模板，但未正确关闭 h3 标记。

所以它会呈现在如下页面上，它有两个 h3 元素。

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

所以渲染 html 有两个独立的元素。因此，在将它们传递给 $compile 服务以编译模板内容时，它会抛出 [$compile:tplrt]，这意味着您的模板应该具有单个根元素，因此 angular 将编译该元素。

Answer 3

您收到错误是因为在您的指令中您使用了 replace:true 并且模板包含在 h3 标签中绞车未正确关闭（您应该关闭 h3 标签使用</h3> 不是 <h3/>).

您应该像 <h3>Hello world</h3> 一样将模板正确地包含在根标记中。

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, <p>blah <em>blah</em> blah</p> instead of simply blah <em>blah</em> 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.

Reference : Angular Docs

I am getting error Error: [$compile:tplrt] while using directive in angularjs

I am getting error Error: [$compile:tplrt] while using directive in angularjs

html

javascript

angularjs

angularjs-directive

angularjs-compile