Angularjs 类型头指令

Posted 2023-02-23

【中文标题】Angularjs 类型头指令

【英文标题】：Angularjs typehead directive

【发布时间】：2013-08-08 17:02:29

【问题描述】：

我正在尝试在 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>

我有两个问题：

如何将项目 ID 从建议列表传递到隐藏输入？ 如何使其成为可重用的组件？ （即使我在同一页面上有多个打字头也能正常工作）

谢谢！

【参考方案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

【讨论】：

我正在使用 bootstrap 3 rc1。我一直在等待更新的库，但还没有找到任何东西。可以轻松修改它以使用最新版本的引导程序吗？非常感谢您的回答。

没关系，我已经想通了，非常感谢您的回答！

对不起，我什至没有看到你的第一条评论，一直很忙。您是否让 angular.ui.bootstrap 与 bootstrap 3 rc1 一起使用？ @AngelinSirbu

哦，太好了。我将在下一个项目中使用 B3。