AngularJS - 當使用Angular-UI Typeahead

我在應用程序的'index'頁面上使用AngularUI Typeahead時，「錯誤：模板必須只有一個根元素」。我沒有做任何幻想 - 實際上，我只是試圖讓他們有在他們的UI現場工作的例子，我得到這個錯誤：AngularJS - 當使用Angular-UI Typeahead

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>

這肯定與OT的typeahead劇本，我可以刪除typeahead="state for state in states | filter:$viewValue"和腳本作品（雖然很明顯的typeahead功能不...）

來源

2013-07-15 Jascination

什麼是'輸入（類型=「文本」，NG-模型=「選擇」，提前鍵入=「|：$ viewValue過濾器狀態狀態狀態」中受益）'，是不是''？ –

@YeLiu哦，道歉，這是ExpressJS使用的'Jade'模板引擎的一部分。它就像你說的那樣呈現，我會更新這個問題來反映這一點。 – Jascination

發佈您的HTML /模板，因爲錯誤是關於模板。 –

您的indexCtrl未在您的html（ng控制器）中引用。您不應該使用undefined使用$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-15 10:06:00 alfrescian

確保您添加正確的ui-bootstrap-tpls-[version].min.js文件（第三方物流的版本包含的模板和代碼）。您需要在引用本地或cdn版本的地方使用腳本標記。

這個錯誤最有可能是由於angular無法找到模板來顯示typeahead選項，試圖通過http獲取一個，並檢索一個404代替（使用一個新的根html元素，從而導致錯誤）。

來源

2013-07-17 15:46:44 AndrewD

並確保包含'ui.bootstrap.tpls'作爲角度模塊的一部分！ – mattwad

前'UI的自舉tpls.js'標籤 –

謝謝你爲我工作 – MNR

您還需要將您的模板文件包裝在一個元素（包括註釋）中。閱讀更多here

來源

2015-02-17 11:20:42 Rafael

遇到山姆問題，並發現我的錯誤。我已經removeAll templateCache，這將導致所有的模板不起作用

來源

2015-10-14 10:46:24 ElvisMcak

我有同樣的問題，但與ui-select指令，但一般問題將是相同的。

我終於可以解決我的問題，我可以確定，在我的情況下，問題是我已經添加了一個http攔截器來自動添加到所有http請求令牌回到服務器。

但是，因爲令牌是在內部進程檢查模板緩存之前添加的，所以結果是請求的文件（bootstrap.select.tpl.html）被攔截器（bootstrap.select.tpl.html ？令牌= xxxxxx），並且不再知道緩存和服務器喜歡從服務器下載它。但在服務器上，我無法解析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-04 15:29:58 dide

在我的情況下，它是角高速緩衝存儲器。 – Thomas

AngularJS - 當使用Angular-UI Typeahead

回答

相關問題