Angularjs 当使用Angular typeahead指令时，console显示error"；指令'的模板；uibTypeaheadPopup'；必须只有一个根元素。”；_Angularjs

Angularjs 当使用Angular typeahead指令时，console显示error"；指令'的模板；uibTypeaheadPopup'；必须只有一个根元素。”；

angularjs

Angularjs 当使用Angular typeahead指令时，console显示error"；指令'的模板；uibTypeaheadPopup'；必须只有一个根元素。”；,angularjs,Angularjs,似乎有很多相关的问题-但是，我尝试了所有的解决方案，但都没有效果让我从讨论这个问题和我所做的尝试开始：我从官方angular bootstrap网站上复制并粘贴了样本 HTML <html> <head> ... // references included under "Attempt 5" </head> <body ng-app="ctl" ng-controller="AppCtrl"> <div> &l

似乎有很多相关的问题-但是，我尝试了所有的解决方案，但都没有效果

让我从讨论这个问题和我所做的尝试开始：

我从官方angular bootstrap网站上复制并粘贴了样本

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>

控制器

$scope.states=[…]；//为简洁起见省略

我得到了以下错误：

错误：[$compile:tplrt]指令“uibTypeaheadPopup”的模板必须只有一个根元素。uib/template/typeahead/typeahead popup.html

我不确定它是否相关，但这些是相关库的版本： -引导CSS 3.3.7 -jQuery 3.1.1 -Bootstrap.js 3.3.7 -Angular 1.5.7（我在这里使用Angular 1） -角度引导2.2.0

我的尝试：

尝试1：将其包装在div标记中，因为它将具有“一个根元素”

尝试2：将模板（typeahead popup.html）包装在

ui bootstrap tpls.js

angular bootstrap模板文件中的div标记中

尝试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**" +
"");
}]);

我觉得我错过了一些明显的东西，但我不知道它是什么…如果能得到一些帮助，我将不胜感激

事实上，我刚刚点击了SO建议的链接，得到了我的答案

这是一件非常基本的事情……正如AndrewD和mattwad所建议的那样，这只是包含正确的依赖项和正确的JS文件的问题，这两个文件我都错过了

具体来说,， ui-bootstrap-tpls.js（模板文件） [“ui.bootstrap.tpls”]（依赖项）

不确定这是否适合保留此问题，但有人可能仍然认为这有帮助

<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>

angular.module("ctl",
    [
        'ui.bootstrap'
    ])
    .controller("AppCtrl", AppCtrl);

AppCtrl.$inject = ["$scope", "$log"];

function AppCtrl($scope, $log) {
    $scope.states = [...]; // omitted for brevity
}