如何解決angularjs自動完成中的這個錯誤「iElement.autocomplete不是一個函數」

Question

我必須實現國家下拉的自動完成。我使用的是angularjs 1.4版本。

爲了實施此自動完成功能，我將此網站推薦爲click here。

但它顯示這個錯誤「iElement.autocomplete不是一個函數」，而實現上述code.Is有任何js文件我必須包括

這裏是我的html代碼

<div ng-app='MyModule'> 
    <div ng-controller='DefaultCtrl'> 
     <input auto-complete ui-items="countries" ng-model="selected"> 
     selected = {{selected}} 
    </div> 
</div> 

JS文件

var app = angular.module('MyModule', []); 

    app.controller('DefaultCtrl', function($scope) 
    { 
    $scope.countries = [ 
     {name: 'Afghanistan', code: 'AF'}, 
     {name: 'Antigua and Barbuda', code: 'AG'}, 
     {name: 'Bahamas', code: 'BS'}, 
     {name: 'Cambodia', code: 'KH'}, 
     {name: 'Cape Verde', code: 'CV'}]; 
    }); 


    app.directive('autoComplete', function($timeout) { 
     return function(scope, iElement, iAttrs) { 
       iElement.autocomplete({ 
        source: scope[iAttrs.uiItems], 
        select: function() { 
         $timeout(function() { 
          iElement.trigger('input'); 
         }, 0); 
        } 
       }); 
     }; 
    }); 

預先感謝您

Answer 1

電子你指的xample似乎是舊的（角度1.0.0），我不確定這是否應該與當前的1.5。無論如何，我建議你看看Typeahead指令from Angular-UI。還有一個例子是你可以編輯來適應你的需求。

以下是使用您的數據的working example。

HTML：

<div ng-controller="MainCtrl"> 
    <h4>Custom templates for results</h4> 
    <pre>Model: {{selected | json}}</pre> 
    <input type="text" ng-model="selected" uib-typeahead="country as country.name for country in countries | filter:{name:$viewValue}" class="form-control" typeahead-show-hint="true" typeahead-min-length="0"> 
</div> 

JS：

angular 
    .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']) 
    .controller('MainCtrl', function($scope, $http) { 
    //ngModel value 
    $scope.selected = undefined; 
    //lookup values 
    $scope.countries = [ 
     {name: 'Afghanistan', code: 'AF'}, 
     {name: 'Antigua and Barbuda', code: 'AG'}, 
     {name: 'Bahamas', code: 'BS'}, 
     {name: 'Cambodia', code: 'KH'}, 
     {name: 'Cape Verde', code: 'CV'} 
    ]; 
    });