[英]AngularJS - “Error: Template must have exactly one root element” when using Angular-UI Typeahead
我在我的應用程序的“索引”頁面上使用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為/ index目錄調用）：
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函數不...）
確保添加正確的ui-bootstrap-tpls-[version].min.js文件（tpls版本包含模板和代碼）。 您將需要一個引用本地或cdn版本的腳本標記。
這個錯誤很可能是由於角度無法找到模板來顯示預先輸入選項，嘗試通過http獲取一個並反而檢索404（使用新的根html元素，因此錯誤）。
我有同樣的問題，但使用ui-select指令，但一般問題是相同的。
我終於可以解決我的問題了，我可以確定在我的情況下問題是我添加了一個http攔截器來自動添加所有http請求令牌返回服務器。
但是，在內部進程檢查模板緩存之前添加了令牌，結果是我的攔截器更改了所請求的文件（bootstrap.select.tpl.html）（bootstrap.select.tpl.html？token = xxxxxx並且它已經不再知道緩存和服務器喜歡從服務器下載它。 但在服務器上我無法解析網址請求，我回答了默認網頁。
我確實修改了我的攔截器，以檢查請求的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-controller）中引用。 您不應該使用undefined使用$scope.selected = '';初始化您選擇的變量$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/
您還需要將模板文件包裝在一個元素中（包括注釋）。 在這里閱讀更多
遇到山姆問題，發現了我的錯誤。 我刪除了所有的templateCache，這將導致所有模板都無法正常工作
AngularJS：在指令模板中使用“th”標簽時，“指令模板必須正好有一個根元素”
[英]AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template
AngularJS 錯誤：指令“XXXXXX”的模板必須只有一個根元素
[英]AngularJS error: Template for directive 'XXXXXX' must have exactly one root element
錯誤：創建自定義指令時，模板必須完全具有一個根元素
[英]Error: Template must have exactly one root element when creating a custom directive
帶有tds的遞歸angularjs指令，必須具有一個根元素
[英]Recursive angularjs directive with tds, must have exactly one root element
Angular Datetimepicker：指令“ uibTimepicker”的模板必須恰好具有一個根元素
[英]Angular Datetimepicker: Template for directive 'uibTimepicker' must have exactly one root element
指令“ zfAsButton”的模板必須具有一個根元素
[英]Template for directive 'zfAsButton' must have exactly one root element
錯誤：[$ compile：tplrt]指令'checkNav'的模板必須恰好具有一個根元素
[英]Error: [$compile:tplrt] Template for directive 'checkNav' must have exactly one root element
錯誤：[$ compile：tplrt]指令“頁腳”的模板必須恰好具有一個根元素
[英]Error: [$compile:tplrt] Template for directive 'footer' must have exactly one root element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.