似乎有很多相关的问题 - 但是，我已经尝试过所有解决方案都无济于事。使用Angular typeahead指令时，控制台显示错误“指令模板”uibTypeaheadPopup'必须只有一个根元素。“
让我来讨论这个问题开始，我已经试过：
我简直复制并从官方的角度引导网站
HTML
<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
控制器
$scope.states = [...]; // omitted for brevity
而且我得到了以下错误：
Error: [$compile:tplrt] Template for directive 'uibTypeaheadPopup' must have exactly one root element. uib/template/typeahead/typeahead-popup.html
我不知道，如果是相关的，但这些都是涉及到的相关库版本： - 引导CSS 3.3.7 - jQuery的3.1.1 - Bootstrap.js 3.3.7 - 角1.5.7（我在这里使用角1） - 角引导2.2.0
我试了一下：
尝试1：在div标签结束语，因为它会再有“一个根元素”。
尝试2：将ui-bootstrap-tpls.js角度引导模板文件中的div标签中的模板（typeahead-popup.html）包裹起来。
尝试3：我试着从模板文件中删除所有'\ n'，因为我偶然发现了一个网站，建议将此作为解决方法。该模板看起来有点像这样在源文件中，我摆脱了所有的\n S的的：
angular.module("uib/template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("uib/template/typeahead/typeahead-popup.html",
"<ul class=\"dropdown-menu\" ng-show=\"isOpen() && !moveInProgress\" ng-style=\"{top: position().top+'px', left: position().left+'px'}\" role=\"listbox\" aria-hidden=\"{{!isOpen()}}\">**\n**" +
" <li class=\"uib-typeahead-match\" ng-repeat=\"match in matches track by $index\" ng-class=\"{active: isActive($index) }\" ng-mouseenter=\"selectActive($index)\" ng-click=\"selectMatch($index, $event)\" role=\"option\" id=\"{{::match.id}}\">**\n**" +
" <div uib-typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>**\n**" +
" </li>**\n**" +
"</ul>**\n**" +
"");
}]);
尝试4：然后我想到了我的模板系统，并认为我可能有标记，没有妥善关闭。初步检查发现在<html>标记的顶部添加了一个<!DOCTYPE html>标记，我已将其删除，但无济于事。我没有看到任何未正确关闭的标签。
尝试5：我认为这可能与我使用node.js运行项目有关，所以不是运行localhost，而是将所有的javascript库从相对路径替换为CDN ，我的项目文件使用绝对路径并直接在浏览器中打开，但我在Chrome和Firefox中遇到了跨源问题。
我的<head>部分看起来像这样。
<head>
<!--<link rel='stylesheet' href='/stylesheets/style.css' />-->
<!--<link href="javascripts/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <!–3.3.7–>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--<script src="javascripts/bower_components/jquery/dist/jquery.js"></script> <!–3.1.1–>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--<script src="javascripts/bower_components/bootstrap/dist/js/bootstrap.js"></script> <!–3.3.7–>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="javascripts/bower_components/angular/angular.js"></script> <!–1.5.8–>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<!--<script src="javascripts/bower_components/angular-bootstrap/ui-bootstrap.js"></script> <!–2.2.0–>-->
<!--<script src="https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-2.2.0.min.js"></script>-->
<script src="/Users/Baggio/WebstormProjects/Scratchpad/public/javascripts/bower_components/angular-bootstrap/ui-bootstrap.js"></script> <!--2.2.0-->
<script src="/Users/Baggio/WebstormProjects/Scratchpad/public/javascripts/AppCtrl.js"></script>
尝试6：删除注释，按角的官方文档。我尝试删除相关文件中的所有注释（我正在使用ui-router进行路由，所以对于我的项目，它是主页，并且子状态的直接模板嵌套在一层以下）。但是，它似乎没有办法。
尝试7：我尝试复制项目并剥离到它的基本要素，所以我只有一个HTML（或ejs作为模板系统，我正在使用）页面和一个JavaScript文件的项目，但显示相同的错误（...必须只有一个根元素）。
HTML
<html>
<head>
... // references included under "Attempt 5"
</head>
<body ng-app="ctl" ng-controller="AppCtrl">
<div>
<input type="text" ng-model="selected" uib-typeahead="state for state in states" class="form-control">
</div>
</body>
</html>
JS
angular.module("ctl",
[
'ui.bootstrap'
])
.controller("AppCtrl", AppCtrl);
AppCtrl.$inject = ["$scope", "$log"];
function AppCtrl($scope, $log) {
$scope.states = [...]; // omitted for brevity
}
我觉得我失去了一些东西很明显，但我无法弄清楚它是什么......希望得到一些帮助。