爲什麼我的Angular-UI typeahead不起作用？

我正在使用AngularJS組件編寫AngularJS 1.5+應用程序。爲什麼我的Angular-UI typeahead不起作用？

我想用ui.bootstrap.typeahead指令從UI引導庫： https://angular-ui.github.io/bootstrap/#!#typeahead

基於這個簡單的例子：https://codepen.io/joe-watkins/pen/EagEWv

於是，我跟着這個工作示例，但不知道我是什麼缺少，我沒有得到任何錯誤，但列表不顯示。

這裏是我的組件layout.component.ts（不用擔心名稱）的代碼：

namespace AppDomain { 

    class LayoutComponent { 
     public bindings: any; 
     public controller: any; 
     public controllerAs: string; 
     public templateUrl: string; 

     constructor() { 
      this.controller = LayoutController; 
      this.controllerAs = 'vm'; 
      this.templateUrl = '/app/layout/layout.component.html'; 
     } 
    } 

    class LayoutController { 
     states: string[]; 
     selected: string; 

     constructor() { console.log('LayoutComponent'); } 

     $onInit() { 
      this.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"]; 
     } 
    } 

    angular.module('app').component('layoutComponent', new LayoutComponent()); 
}

其中layout.component.html包含實際的輸入字段（簡體）：

<input name="states" id="states" type="text" placeholder="enter a state" 
     ng-model="vm.selected" 
     uib-typeahead="state for state in vm.states | filter:$viewValue | limitTo:8" 
     class="form-control">

，同時在主頁上：

<layout-component></layout-component>

我已經包括以下所需的文件：

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"> 
<script src="/node_modules/jquery/dist/jquery.min.js"></script> 
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 
<script src="/node_modules/angular/angular.min.js"></script> 
<script src="/node_modules/angular-filter/dist/angular-filter.min.js"></script> 
<script src="/node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script> 
<script src="/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

不幸的是，沒有任何顯示，當我開始打字。我錯過了什麼嗎？

UPDATE

必須UIB-預輸入，而不是僅僅預輸入，更新後的代碼現在的工作！

來源

2017-10-07 monstro

控制檯中是否有錯誤？如果過濾器被移除，它會顯示什麼？（'filter：$ viewValue | limitTo：8'）。 – Alexei

在控制檯中沒有錯誤，它與示例中相同https://codepen.io/joe-watkins/pen/EagEWv如果我刪除過濾器，但它必須在那裏才能工作 – monstro

UPDATE

必須UIB-預輸入，而不是僅僅預輸入，更新後的代碼現在的工作！

來源

2017-10-07 17:54:33 monstro

爲什麼我的Angular-UI typeahead不起作用？

回答

相關問題