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 ，更新后，代码现在正在运行！

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

1 个答案: