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>

我有两个问题：

如何将item-id从建议列表传递给隐藏输入？
如何使其成为可重复使用的组件？（即使我在同一页面上有多个打印头，也能使它工作）

谢谢！

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

Angularjs typeahead指令

1 个答案: