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

2024-04-30

我在用着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功能不...)


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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS - 使用 Angular-UI Typeahead 时出现“错误:模板必须只有一个根元素” 的相关文章

随机推荐