javascript - Angularjs 类型头指令

Question

我正在尝试在 AngularJS 中创建一个可重用的 typehead 指令，但我在路上遇到了一些障碍。这是我的工作示例：

指令.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 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