AngularJS-“;错误:模板必须只有一个根元素“”;当使用Angular UI Typeahead时

AngularJS - "Error: Template must have exactly one root element" when using Angular-UI Typeahead

本文关键字：UI Typeahead 元素 Angular 有一个 错误 AngularJS-      更新时间：2023-09-26

我在应用程序的"索引"页面上使用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">

如果相关，我的主页的控制器（通过$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'];
}

请注意，页面上控制器的其余部分工作得非常好，只是$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函数没有…）

确保添加了正确的ui-bootstrap-tpls-[version].min.js文件（tpls版本包含模板和代码）。您将需要一个引用本地或cdn版本的脚本标记。

这个错误很可能是由于angular找不到显示typeahead选项的模板，试图通过http获取一个模板，然后检索404（使用一个新的根html元素，从而导致错误）。

我也遇到了同样的问题，但使用了ui select指令，但一般问题是一样的。

我终于可以解决我的问题了，我可以确定，在我的情况下，问题是我添加了一个http拦截器，自动添加到所有http请求中，将令牌返回到服务器。

但是，由于令牌是在内部进程检查模板缓存之前添加的，因此请求的文件（bootstrap.select.tpl.html）被我的拦截器（bootstract.select.tpl.html？token=xxxxxx）更改了，缓存的hach中不再知道它，服务器喜欢从服务器下载它。但在服务器上，我无法解决url请求，我用默认网页回答。

我确实修改了我的拦截器，以检查请求的url是否已经在缓存中，并且只有在缓存中找不到页面时才添加令牌。之后一切都很顺利。

希望有人能从这样的解决方案中受益

/**
 * Intercept all http-Traffic to add the token
 */
app.config(
  function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q, $rootScope, $localStore, $templateCache) {
        return {
          request: function (config) {
            // check if the cache has the file already loaded, in this case do not append any token
            if (!$templateCache.get(config.url)) {
              if (!config.params) config.params = {};
              var token = $rootScope.token;
              if (token !== null && token !== undefined && token !== 'undefined') {
                $localStore.set('token', token);
                // only if it's a valid token, add it
                config.params.token = token;
              }
            }
            return config || $q.when(config);
          }
        };
      }
    );
  }
);

您的indexCtrl在html（ng控制器）中未被引用。您不应该使用未定义的$scope.selected = '';来初始化您选择的变量，或者简单地删除它。此代码正在工作：

<div class="container">
    <div ng-controller="mainCtrl" 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>
angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $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'];
});

JSFiddle：http://jsfiddle.net/alfrescian/EDZgT/

您还需要将模板文件封装在一个元素中（包括注释）。点击此处阅读更多

遇到sam问题，发现了我的bug。我已经删除了所有模板缓存，这将导致所有模板都不起作用

相关文章：