我正在使用 AngularUI Typeahead ，在我的应用程序的“索引”页面上。我没有做任何花哨的事情 - 事实上，我只是想让他们在他们的 UI 网站上运行的示例正常工作，但我收到了这个错误:
Error: Template must have exactly one root element
我不知道这是什么意思，但只有当我有以下代码时才会发生:
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
如果相关，我的主页 Controller (通过 $routeProvider 为 / 索引目录调用):
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'];
}
请注意，页面上 Controller 的其余部分工作绝对正常，只是 $scope.selected/$scope.states 导致了问题。我无法弄清楚错误的含义，因此排除故障非常困难!
有什么想法吗？
编辑这是我的 HTML 模板:
<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="state for state in states | filter:$viewValue" 并且脚本有效(尽管显然typeahead 函数不...)
最佳答案
确保您正在添加正确的 ui-bootstrap-tpls-[version].min.js 文件(tpls 版本包含模板和代码)。您将需要在某处引用本地或 cdn 版本的脚本标记。
这个错误很可能是由于 Angular 无法找到显示预输入选项的模板，试图通过 http 获取一个并检索 404 而不是(使用新的根 html 元素，因此错误) .
关于javascript - AngularJS - 使用 Angular-UI Typeahead 时为 "Error: Template must have exactly one root element"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17646573/