我正在尝试遵循角度最佳实践建议并使用指令
封装可重用的 HTML元素.
错误消息:
封装可重用的 HTML元素.
错误消息:
Error: Template must have exactly one root element. was: partials/user/path/to/somedata.html
指令代码:
.directive('stDirectivename',function() { return { restrict: 'E',replace: true,// transclude: false,template: 'partials/user/path/to/somedata.html' }; })
和模板:
<div ng-show="person.condition" class="someclass"> <span class = "personRoi"> <i class="anotherclass " ng-class="{'specialclass1': person.count>=0,'specialclass2':person.count<0}"> </i>{{person.somedata}}% </span> </div>
在部分(它是模态的模板)中调用为:
< ST-directivename>< / ST-directivename>
当我在指令中替换模板url以获得简单的html字符串时.一切正常.不幸的是,我无法为涉及’和’的真实模板做到这一点.此解决方案不会扩展到我计划的某些指令的更大模板.
此外,当我只是插入模板html而不是指令标签时,一切正常(我实际上是从现有的html中提取代码以使其可重用).
我在其他SO问题中读到这与在模板中有额外的空格/标签/注释有关.但我只是找不到这样的元素.
有人知道解决方案吗?我会很高兴得到任何帮助.
你的错误是:你必须使用templateUrl而不是模板,以便指出html部分的路径
.directive('stDirectivename',function(){ return { restrict:'E',replace:true,//transclude:false,templateUrl:'partials/user/path/to/somedata.html' }; })