Angularjs typehead директива

Question

Я пытаюсь создать многократно используемую директиву headhead в AngularJS, но я ударил несколько ударов по дороге. Вот мой рабочий пример:

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. Как передать идентификатор записи из список предложений для скрытого ввода?
2. Как сделать его многоразовым компонентом? (заставьте его работать, даже если у меня есть несколько типов голов на той же странице)

Спасибо!

Answer 1

Вы посмотрели директиву @ Angular ui для twitter bootstrap 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