0

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>

2 つの質問があります。

  1. 提案リストから非表示の入力に item-id を渡すにはどうすればよいですか?
  2. 再利用可能なコンポーネントにする方法は? (同じページに複数のタイプヘッドがある場合でも機能するようにします)

ありがとう！

4

1 に答える 1

0

@ Angular ui の Twitter ブートストラップ タイプヘッドのディレクティブをご覧になりましたか。これにより、面倒な 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

于 2013-08-07T11:16:36.607 に答える