指令中的 AngularJS 模板函数给出错误“指令的模板必须只有一个根元素”答案

【问题标题】：AngularJS template function in directive giving error 'Template for directive must have exactly one root element'指令中的 AngularJS 模板函数给出错误“指令的模板必须只有一个根元素”
【发布时间】：2017-08-09 19:45:26
【问题描述】：

我正在开发一个角度应用程序。对于某个指令，我使用这样的模板函数：

template: function(element, attr) {
              return '<div class="myClass">/..some HTML here../</div>'
          }

但是，当我运行我的代码时，我收到以下错误：

错误：指令模板必须只有一个根元素，原为 function (element, attr) { ...函数定义在这里 }

如果我将其更改为正常的键值对，如下所示，它可以正常工作。

template: '<div class="myClass">/..some HTML here../</div>'

我不明白这里有什么问题。链接和编译功能工作得很好。对此的任何帮助将不胜感激。提前致谢

【问题讨论】：

您可以针对您的问题发布一个 plunkr 吗？您使用的是哪个角度版本？当您将函数传递给模板时，您是否有一些逻辑会生成 html>
@NikhilBhandari 虽然我想在ng-switch 中使用一些attr，但我只是从函数中返回html，而不使用任何逻辑来生成html。我正在使用角度 v1.0.4
指令模板变量需要一个值。你的传递函数。如果你想使用函数。在某个地方声明该函数并在这里调用它，如template:myfunction()
我试图将一个函数传递给模板，但它在 Angular 1.0.4 中不起作用。我认为它是在 1.1.4 中引入的。检查这个 plunkr plnkr.co/edit/QVdE3xdn3hmcoQ33gj2R?p=preview
谢谢@NikhilBhandari 我不知道

标签： javascript html angularjs angularjs-directive angularjs-templates

【解决方案1】：

此功能是在 Angular 1.1.4 的更高版本中引入的。正如@saiyan 提到的，您必须升级或找到解决方法。

检查这个 plunkr - plnkr.co/edit/QVdE3xdn3hmcoQ33gj2R?p=preview

HTML：

<!DOCTYPE html>
<html ng-app="myapp">

   <head>

    <!-- CHANGE THE ANGULAR VERSION HERE  -->
    <script src="https://code.angularjs.org/1.0.4/angular.js"></script>

    <script src="app.js"></script>
  </head> 

  <body >
    <div something></div>
  </body>

</html>

JS：

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

app
    .directive("something", function () {
        return {
            template: function () {
                return "Hello World!";
            }
        }
    })

【讨论】：