AngularJS - “错误:模板必须只有一个根元素"；使用 Angular-UI Typeahead 时 [英] AngularJS - "Error: Template must have exactly one root element" when using Angular-UI Typeahead
问题描述
我在我的应用的索引"页面上使用 AngularUI Typeahead.我没有做任何花哨的事情 - 事实上，我只是想让他们在他们的 UI 网站上找到的例子工作，我收到了这个错误:
错误:模板必须只有一个根元素我不知道这是什么意思，但只有当我有以下代码时才会发生:
如果相关，我的主页控制器(通过 $routeProvider 为 / 索引目录调用):
function indexCtrl($scope, $location, $resource) {$scope.selected = 未定义；$scope.states = ['阿拉巴马州', '阿拉斯加州', '亚利桑那州', '阿肯色州', '加利福尼亚州', '科罗拉多州', '康涅狄格州', '特拉华州', '佛罗里达州', '乔治亚州', '夏威夷州',爱达荷州"、伊利诺伊州"、印第安纳州"、爱荷华州"、堪萨斯州"、肯塔基州"、路易斯安那州"、缅因州"、马里兰州"、马萨诸塞州"、密歇根州"、明尼苏达州"、密西西比州"', '密苏里州', '蒙大拿州', '内布拉斯加州', '内华达州', '新罕布什尔州', '新泽西州', '新墨西哥州', '纽约州', '北达科他州', '北卡罗来纳州', '俄亥俄州'', '俄克拉荷马州', '俄勒冈州', '宾夕法尼亚州', '罗德岛州', '南卡罗来纳州', '南达科他州', '田纳西州', '德克萨斯州', '犹他州', '佛蒙特州', '弗吉尼亚州', '华盛顿"、西弗吉尼亚"、威斯康星"、怀俄明"]；}请注意，页面上控制器的其余部分完全正常，只是 $scope.selected/$scope.states 引起了问题.我无法弄清楚错误意味着什么，因此故障排除非常困难！
有什么想法吗?
编辑这是我的 HTML 模板:
<头>//头部的东西，可能无关紧要<身体><div class="容器"><div ng-view="" class="row-fluid"><form class="row-fluid"><div class="container-fluid"><input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"></表单>
//这里有一堆 Angular 脚本</html>
它肯定与 typeahead 脚本有关，我可以删除 typeahead="state for state in states | filter:$viewValue" 并且脚本有效(尽管显然typeahead 功能不...)
确保添加了正确的 ui-bootstrap-tpls-[version].min.js 文件(tpls 版本包含模板以及代码).您将需要在某处引用本地或 CDN 版本的脚本标记.
这个错误很可能是由于 angular 无法找到模板来显示预先输入的选项，尝试通过 http 获取一个并检索 404(使用新的根 html 元素，因此错误).
I'm using AngularUI Typeahead, on the 'index' page of my app. I'm not doing anything fancy - in fact, I'm just trying to get the example they've got up on their UI site working, and I'm getting this error:
Error: Template must have exactly one root element
I have no idea what this means, but it only happens when I have the following code:
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
If relevant, my controller for my main page (which is called via $routeProvider for / index directory):
function indexCtrl($scope, $location, $resource) {
$scope.selected = undefined;
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
}
Note that the rest of the controller on the page works absolutely fine, it's just the $scope.selected/$scope.states that is causing trouble. I can't figure out what the error means, so troubleshooting is quite difficult!
Any ideas?
EDIT Here is my HTML template:
<html ng-app="myApp" class="ng-scope">
<head>
// Head stuff, probably irrelevant
</head>
<body>
<div class="container">
<div ng-view="" class="row-fluid">
<form class="row-fluid">
<div class="container-fluid">
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
</div>
</form>
</div>
</div>
// A bunch of Angular scripts are here
</body>
</html>
It's definitely related ot the typeahead script, I can remove typeahead="state for state in states | filter:$viewValue" and the script works (although obviously the typeahead function doesn't...)
Make sure you are adding the correct ui-bootstrap-tpls-[version].min.js file (tpls versions contain templates as well as code). You will need a script tag somewhere referencing a local or cdn version.
It is most likely that this error is caused by angular not being able to find the template to display the typeahead options, attempting to fetch one over http and retrieving a 404 instead (with a new root html element, thus the error).
这篇关于AngularJS - “错误:模板必须只有一个根元素"；使用 Angular-UI Typeahead 时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
