내 Angular-UI 앞 글자가 작동하지 않는 이유는 무엇입니까?

Question

AngularJS 구성 요소를 사용하는 TypeScript로 AngularJS 1.5+ 앱을 쓰고 있습니다.

내가 UI 부트 스트랩 라이브러리에서 ui.bootstrap.typeahead 지시어를 사용하려면 :이 간단한 예제를 기반으로 https://angular-ui.github.io/bootstrap/#!#typeahead

: 그래서 https://codepen.io/joe-watkins/pen/EagEWv

는,이 동작하는 예제를 따라하지만, 나는 확실하지 누락되었지만 오류는 발생하지 않지만 목록에 나타나지 않습니다.

layout.component.html 실제 입력 필드를 포함

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.ts이 (이름에 대해 걱정하지 마십시오) 내 구성 요소에 대한 코드입니다) :

메인 페이지에

<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-선행 입력 대신 단지 선행 입력, 포스트 업데이트해야합니다!

Answer 1

UPDATE

코드는 지금 노력하고 있습니다 UIB-선행 입력 대신 단지 선행 입력, 포스트 업데이트해야합니다!