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