javascript - 我收到错误 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>

错误是：

错误：[$compile:tplrt] 指令“helloWorld”的模板必须只有一个根元素。

如何解决这个错误？

score 1 · Accepted Answer

快速解决

根本原因（replace: true）

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

解释

您的代码中有两个问题。

您应该关闭指令自定义元素，例如<hello-world><hello-world/>. 如果您不关闭标签，第一次出现会正常工作，但之后其余的事情将无法正常工作。见这里。
另一件事是您的指令模板有误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]，这意味着您的模板应该具有单个根元素，因此角度将编译该元素。

score 0 · Accepted Answer

您收到错误是因为在您使用的指令中replace:true并且模板包含在标签绞盘中没有正确关闭（您应该使用noth3关闭标签）。h3</h3><h3/>

您应该将模板正确地包含在根标记中，例如<h3>Hello world</h3>.

当使用模板（或 templateUrl）声明指令并打开替换模式时，模板必须只有一个根元素。也就是说，模板属性的文本或 templateUrl 引用的内容必须包含在单个 html 元素中。例如，<p>blah <em>blah</em> blah</p>而不是简单地blah <em>blah</em> blah. 否则，替换操作将导致单个元素（指令）被多个元素或节点替换，这是不受支持的，并且在实践中通常不需要。

参考：角度文档

score 0 · Accepted Answer

评论替换：真。

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

javascript - 我收到错误 Error: [$compile:tplrt] while using directive in angularjs

3 回答 3

Related