Angularjs directive de typehead

Question

J'essaye de créer une directive de typehead réutilisable dans AngularJS mais j'ai heurté quelques bosses sur la route. Voici mon exemple de travail:

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> 

J'ai deux questions:

1. Comment puis-je passer l'élément-id de la liste de suggestions à l'entrée cachée?
2. Comment en faire un composant réutilisable? (faites-le fonctionner même si j'ai plusieurs têtes de caractères sur la même page)

Merci!

Answer 1

Avez-vous jeté un coup d'oeil @ Angular ui's directive pour twitter bootstrap typehead. Cela va vous faire économiser beaucoup de tracas 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/Contrôleur

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