Angularjs typehead指令

Question

我正在嘗試在AngularJS中創建一個可重用的typehead指令，但我在路上遇到了一些顛簸。這是我的工作例如：

Directives.js

app.directive('autosuggest', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, elem, attrs) { 
     /* Nothing here yet */ 
    } 
    }; 
}); 

app.directive('suggestinput', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, elem, attrs) { 
     // Bind keys 
     elem.bind('keydown', function (e) { 
     if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13) { scope.$emit('listNavigate', { code: e.keyCode }); } 
     else { 
      // Get suggestions 
      scope.getSuggest(attrs.source, elem.val()); 
     } 
     }); 

     // Listen for suggestion list 
     scope.$on('listSelect', function (e, data) { 
     elem.val(data.name); 
     }); 
    } 
    }; 
}); 

app.directive('suggestlist', function() { 
    var selectedIndex = -1; 
    return { 
    restrict: 'A', 
    link: function (scope, elem, attrs) { 
     scope.$on('listNavigate', function (e, data) { 
     if (data.code === 38) { 
      selectedIndex--; 
      // User pressed up arrow 
      elem.children().removeClass('sel'); 
      elem.children().eq(selectedIndex).addClass('sel'); 
     } else if(data.code == 40) { 
      selectedIndex++; 
      // User pressed down arrow 
      elem.children().removeClass('sel'); 
      elem.children().eq(selectedIndex).addClass('sel'); 
     } else if(data.code == 13) { 
      // Prepare data 
      var selectData = {}; 
      selectData.suggestValue = elem.children().eq(selectedIndex).children().html(); 
      selectData.suggestId = elem.children().eq(selectedIndex).children().attr('item-id'); 

      // Send data to input(s) 
      scope.$emit('listSelect', selectData); 
     } 
     }); 
    } 
    }; 
}); 

HTML：

<fieldset autosuggest> 
    <input type="hidden" name="languageId"> 
    <input type="text" suggestinput source="languages"> 
    <input type="submit" class="button" value="Save"> 
    <ul suggestlist ng-show="suggest.languages" class="suggestList"> 
    <li ng-repeat="language in suggest.languages"> 
     <a href="#" ng-bind="language.name" item-id="{{language.id}}"></a> 
    </li> 
    </ul> 
</fieldset> 

我有兩個問題：

1. 我如何通過項目-ID從暗示輸入的建議列表？
2. 如何使它成爲可重用組件？ （即使我在同一頁上有多個打字頭，也可以工作）

謝謝！

Answer 1

你有沒有看過@ Angular ui的twitter引導程序typehead的指令。這會節省你很多的麻煩ui.bootstrap.typeahead

HTML

<div ng-app="app" id="app"> 
    <div class='container-fluid' ng-controller="TypeaheadCtrl"> 
     <pre>Model: {{selected| json}}</pre> 
     <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8"/> 
    </div> 
</div> 

JS /控制器

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

function TypeaheadCtrl($scope) { 

    $scope.selected = undefined; 
    $scope.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']; 
} 

JSFIDDLE