角引導中的Typeahead插件對我不起作用

我無法在angular-bootstrap中使用typeahead功能在簡單的yeoman生成環境中工作。我期望的是能夠開始在輸入字段中輸入內容，並使下拉顯示匹配輸入字段中輸入的字符。要匹配的項目集合是['alpha'，'beta'，'gamma'，'delta']但是如果我鍵入a，則沒有任何顯示，但它們都應該顯示出來，因爲a對所有人都是通用的。感謝任何幫助。角引導中的Typeahead插件對我不起作用

下面是我建立我的測試應用程序的步驟：

$ yo angular 
Include twitter bootstrap Y 
Twitter bootstrap with Compass N 
Included all modules and took defaults for the rest 

$ bower install angular-bootstrap --save 

$ bower install angular-ui-bootstrap --save

編輯應用程序/視圖/ main.html中（片段）：

  <div class="jumbotron"> 
       <h1>'Allo, 'Allo!</h1> 
       <p class="lead">Always a pleasure scaffolding your apps.</p> 
       <p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p> 
      </div> 

      <!-- Added this to verify that $scope.shows is available (and it is) --> 
      <h2>Shows</h2> 
      <ul ng-repeat="show in shows"> 
      <li>{{show}}</li> 
      </ul> 

      <!-- This is what is not working --> 
      <h2>typeahead</h2> 
      <input type="text" ng-model="selected" typeahead="show for show in shows | filter:$viewValue | limitTo:8" class="form-control"> 

      <div class="row marketing"> 
       <h4>HTML5 Boilerplate</h4>

編輯應用程序/腳本/控制器/ main.js：

  'use strict'; 

      angular.module('wtfoApp', ['ui-bootstrap']) 
       .controller('MainCtrl', function ($scope) { 
       $scope.awesomeThings = [ 
        'HTML5 Boilerplate', 
        'AngularJS', 
        'Karma' 
       ]; 
       $scope.shows = ['alpha', 'beta', 'gamma', 'delta']; 
       });

非常感謝。

編輯：忘記依賴[ui-bootstrap]。這可能是我的問題的解決方案，但我無法添加它。 Firebug抱怨說它找不到ui-bootstrap。我也試過[bower_components/angular-bootstrap/ui-bootstrap]和[bower_components/angular_bootstrap]。儘管已經很晚了，所以我必須在早上再次拿起它。

編輯2：跟隨vucalur的建議添加angular-ui-bootstrap。這在bower_components/angular-ui-bootstrap下添加了一個模板文件夾

做了這樣的改變：[ui-bootstrap] - > ['ui-bootstrap']。顯示無分頁和Firebug的錯誤是：

[$注射器：modulerr]未能實例化模塊，用戶界面，引導因爲：[$注射器：NOMOD]模塊「UI自舉」不可！您拼錯了模塊名稱或忘記加載模塊名稱。如果註冊模塊確保您指定依賴關係作爲第二個參數。

編輯3：通過重新運行喲和鮑爾重新構造（與鮑爾試圖添加 - 保存開關）。同樣的結果。這就像是缺少類路徑一樣，不能讓我引用bower_components中的依賴關係。

來源

2014-01-08 Strat-O

angular.module（'wtfoApp'，['ui-bootstrap']）應該是角度的。模塊（'wtfoApp'，['ui.bootstrap']） –

看看this提交。（如果我們做了一些重新綁定和鏈接不再有效：https://github.com/vucalur/django-wibses，「壯舉（令牌下拉）...」承諾。）

該項目使用yeoman。
這是CoffeeScript & Python在後端，但我希望你能得到它。
項目從服務器獲得 - JSONP和$http承諾api來玩，但如果你有客戶端的項目，可能你不會需要。
另請注意，您將不需要使用angular-ui-bootstrap的bootstrap3分支。
相關性爲"angular-ui-bootstrap": "~0.9.0"，而不是angular-boostrap。至少這對我有用。

來源

2014-01-08 07:37:03 vucalur

嘗試ui.bootstrap而不是ui-bootstrap：你想要一段時間，而不是短劃線。

來源

2014-01-17 17:58:41 user3207753

角引導中的Typeahead插件對我不起作用

回答

相關問題