为什么我的 Angular-UI 预输入不起作用？

Question

我正在使用 AngularJS 组件使用 TypeScript 编写 AngularJS 1.5+ 应用程序。

我想使用 UI Bootstrap 库中的 ui.bootstrap.typeahead 指令： 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>

很遗憾，当我开始输入时，什么都没有显示。 我错过了什么吗？

更新

必须是 uib-typeahead 而不仅仅是 typeahead，更新后，代码现在可以工作了！

Answer 1

更新

必须是 uib-typeahead 而不仅仅是 typeahead，更新后，代码现在可以工作了！