Question

在angularJS 1.3.14中

＆＃13;

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

＆＃13;

<html ng-app='myApp'>
    <body ng-controller = "myController">
       <hello-world/>
    </body>
</html>

＆＃13;

＆＃13; 错误是：

错误：[$ compile：tplrt]指令模板＆＃39; helloWorld＆＃39;一定有正是一个根元素。

如何解决此错误？

Answer 1

快速修复

根本原因（<div class="front"> <p>Hello World</p> </div>）

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

<强>解释

您的代码中存在两个问题。

您应该关闭指令自定义元素，例如template :'<h3>Hello world</h3>'。如果你没有关闭标签，第一次出现将正常工作，但在此之后其余部分将无效。 See here。
其他的是你的指令模板有错<hello-world><hello-world/>

指令模板

template

应该是

<h3>Hello world<h3/>

您在<h3>Hello world</h3>这样的指令中有模板，但没有正确关闭<h3>Hello world<h3/>标记。

这样就会在下面的页面上呈现，它有两个h3元素。

h3

所以render html有两个独立的元素。因此，在将它们传递给<h3>Hello world</h3> <h3></h3>服务以编译模板的内容时，它会抛出$compile，这意味着您的模板应该具有单个根元素，因此angular将编译该元素。

Answer 2

评论替换：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>'
                };
                });

Answer 3

您收到错误是因为在您的指令中您使用的是replace:true且模板已包含在h3标记中，绞盘未正确关闭（您应使用{{h3标记关闭1}}不是</h3>）。

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

使用template（或templateUrl）声明指令时替换模式，模板必须只有一个根元素。那是，模板属性的文本或由引用的内容 templateUrl必须包含在单个html元素中。对于例如，<h3>Hello world</h3>而不仅仅是<p>blah <em>blah</em> blah</p>。否则，将导致替换操作在单个元素（指令）中被替换为多个元素或节点，不受支持且通常不需要实践。

<强> Reference : Angular Docs

我收到错误错误：[$ compile：tplrt]在angularjs中使用指令时

3 个答案: