模板必须具有自定义指令代替一个根元素：真 [英] Template must have exactly one root element with custom directive replace: true
问题描述
我有一个自定义的指令问题替换为：真，
http://jsbin.com/OtARocO/2/edit
据我所知道的，我也只有一个根元素，我的，什么是怎么回事？
错误：模板必须有一个根元素。是：
＆LT;＆TBODY GT;
＆所述; TR＆GT;＆下; TD＆GT; {{item.name}}＆下; / TD＆GT;＆下; / TR＆GT;
＆所述; TR＆GT;＆下; TD＆GT; ROW2＆下; / TD＆GT;＆下; / TR＆GT;
＆LT; / TBODY＆GT;
使用Javascript：
VAR应用= angular.module（AngularApp，[]）
.directive（'定制'，[功能（）{
返回{
限制：'E'，
更换：真实，
templateUrl：lineItem.html'，
链接：功能（范围，元素，ATTRS）{ }
};
}]）
.controller（'MyCtrl'，['$范围'，函数（$范围）{
$ scope.items = [
{
名称：'富'
}，
{
名称：'棒'
}，
{
名称：巴兹
}
];
}]）;
HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js＆GT;＆下; /脚本＆GT;
＆LT; META NAME =说明内容=阿凡达角示例/＆GT; ＆LT;脚本的src =// crypto-js.google code.com / SVN /标签/ 3.1.2 /编译/汇总/ md5.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js\"></script>
＆LT;间的charset = UTF-8 /＆GT;
＆LT;标题＆GT; JS斌＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;车身数据-NG-应用=AngularApp＆GT;
＆LT;脚本类型=文/ NG-模板ID =lineItem.html＆GT;
＆LT;＆TBODY GT;
＆所述; TR＆GT;＆下; TD＆GT; {{item.name}}＆下; / TD＆GT;＆下; / TR＆GT;
＆所述; TR＆GT;＆下; TD＆GT; ROW2＆下; / TD＆GT;＆下; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; / SCRIPT＆GT;
＆LT; DIV数据-NG-控制器=MyCtrl＆GT;
＆LT;表＆gt;
＆LT;自定义数据-NG-重复= GT中的项项＆;＆LT; /定制＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
似乎是一个已知的bug AngularJs的。
你可以做的是改变限制属性代替元素，从模板中删除 TBODY ，并使用＆LT; TBODY定制NG-重复=项中的项目方式＆gt; 在你的HTML code
基本上是：
您的模板就变成了：
＆LT; TR＆GT;＆LT; TD＆GT; {{item.name}}＆LT; / TD＆GT;＆LT; / TR＆GT;
＆所述; TR＆GT;＆下; TD＆GT; ROW2＆下; / TD＆GT;＆下; / TR＆GT;
您指令：
{回报
限制：'A'，
templateUrl：lineItem.html'，
链接：功能（范围，元素，ATTRS）{ }
};
和您的HTML：
＆LT; DIV数据-NG-控制器=MyCtrl＆GT;
＆LT;表＆gt;
＆LT; TBODY自定义数据-NG-重复=中的项项＆GT;＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
I am having issues with a custom directive with replace: true,
http://jsbin.com/OtARocO/2/edit
As far as I can tell, I do only have one root element, my , what is going on here?
Error: Template must have exactly one root element. was:
<tbody>
<tr><td>{{ item.name }}</td></tr>
<tr><td>row2</td></tr>
</tbody>
Javascript:
var app = angular.module("AngularApp", [])
.directive('custom', [function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'lineItem.html',
link: function(scope, element, attrs) {
}
};
}])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.items = [
{
name: 'foo'
},
{
name: 'bar'
},
{
name: 'baz'
}
];
}]);
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta name="description" content="Angular Avatar Example" />
<script src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body data-ng-app="AngularApp">
<script type="text/ng-template" id="lineItem.html">
<tbody>
<tr><td>{{ item.name }}</td></tr>
<tr><td>row2</td></tr>
</tbody>
</script>
<div data-ng-controller="MyCtrl">
<table>
<custom data-ng-repeat="item in items"></custom>
</table>
</div>
</body>
</html>
Seems to be a known bug of AngularJs.
What you could do is to change the restriction to attribute instead of element, remove the tbody from the template and use a <tbody custom ng-repeat="item in items"> in your html code.
Basically:
Your template becomes:
<tr><td>{{ item.name }}</td></tr>
<tr><td>row2</td></tr>
Your directive:
return {
restrict: 'A',
templateUrl: 'lineItem.html',
link: function(scope, element, attrs) {
}
};
And your HTML :
<div data-ng-controller="MyCtrl">
<table>
<tbody custom data-ng-repeat="item in items"></tbody>
</table>
</div>
这篇关于模板必须具有自定义指令代替一个根元素：真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
