AngularJS - “错误：模板必须只有一个根元素”使用Angular-UI Typeahead时 [英] AngularJS - "Error: Template must have exactly one root element" when using Angular-UI Typeahead
问题描述
我在我的应用的索引页面上使用 AngularUI Typeahead 。我没有做任何花哨的事 - 事实上，我只是试图让他们在他们的UI网站上工作的例子，我收到这个错误：
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">
如果相关，我的主页面的控制器（通过 $调用） routeProvider for / index directory）：
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'];
}
请注意，页面上其余的控制器绝对可以使用好的，只是 $ scope.selected / $ scope.states 造成了麻烦。我无法弄清楚错误的含义，因此排除故障非常困难！
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!
有什么想法吗？
编辑以下是我的HTML模板：
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>
它肯定与 typeahead 脚本有关，我可以删除 typeahead =状态州状态| filter：$ viewValue并且脚本可以工作（虽然显然是 typeahead 函数不...）
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...)
推荐答案
确保添加正确的 ui- bootstrap-tpls- [version] .min.js file（tpls版本包含模板和代码）。你需要一个引用本地或cdn版本的脚本标签。
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.
这个错误很可能是由于角度无法找到模板来显示typeahead选项，尝试通过http获取一个并检索404（使用新的根html元素，因此错误）。
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屋！
