我在用着AngularUI 提前输入 http://angular-ui.github.io/bootstrap/#/typeahead,在我的应用程序的“索引”页面上。我没有做任何花哨的事情 - 事实上,我只是想让他们在 UI 网站上发布的示例正常工作,但我收到了此错误:
Error: Template must have exactly one root element
我不知道这意味着什么,但只有当我有以下代码时才会发生:
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
如果相关,我的主页控制器(通过调用$routeProvider
for /
索引目录):
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
这造成了麻烦。我无法弄清楚错误的含义,因此排除故障相当困难!
有任何想法吗?
EDIT这是我的 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
功能不...)