AngularJS 指令中的模板函数给出错误 'Template for directive must have exactly one root element'

Question

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

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

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

Error: Template for directive must have exactly one root element, was function (element, attr) { ...the function definition goes here }

如果我按如下方式将其更改为普通键值对，则可以正常工作。

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

我不明白这里出了什么问题。 link 和编译函数工作得很好。对此的任何帮助将不胜感激。提前致谢

Answer 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!";
            }
        }
    })

AngularJS 指令中的模板函数给出错误 'Template for directive must have exactly one root element'

AngularJS template function in directive giving error 'Template for directive must have exactly one root element'

html

javascript

angularjs

angularjs-directive

angularjs-templates