6

我在我的应用程序的“索引”页面上使用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造成了麻烦。我无法弄清楚错误的含义，因此故障排除非常困难！

有任何想法吗？

编辑这是我的 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函数没有......）

4

5 回答 5

23

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

这个错误很可能是由于 angular 无法找到模板来显示预输入选项，尝试通过 http 获取一个并检索 404（使用新的根 html 元素，因此出现错误）。

于 2013-07-17T15:46:44.530 回答
2

我有同样的问题，但使用 ui-select 指令但一般问题是相同的。

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

但是由于在内部进程可以检查模板缓存之前添加了令牌，因此我的拦截器（bootstrap.select.tpl.html?token=xxxxxx）更改了请求的文件（bootstrap.select.tpl.html） ) 并且它在缓存的散列中不再为人所知，服务器喜欢从服务器下载它。但在服务器上，我无法解析 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);
          }
        };
      }
    );
  }
);
于 2016-03-04T15:29:58.447 回答
1

您indexCtrl的 html (ng-controller) 中未引用您的。您不应该使用未定义的使用$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/

于 2013-07-15T10:06:00.343 回答
0

您还需要将模板文件包装在一个元素中（包括注释）。在这里阅读更多

于 2015-02-17T11:20:42.027 回答
0

遇到山姆问题，发现了我的错误。我有removeAll的templateCache，那会导致所有的模板都不行

于 2015-10-14T10:46:24.620 回答