AngularJS是一个强大的前端开发框架，它通过声明式编程方式简化了构建动态Web应用的复杂性。Typeahead是一种常见的用户界面元素，用于提供实时搜索建议，提高用户体验。在AngularJS中，我们可以创建自定义指令来实现这种功能，就像标题所提及的angular-typeahead-directive。该angular-typeahead-directive是一个基本的实现，它允许开发者为输入框添加自动补全功能。在JavaScript中，指令是AngularJS的核心特性之一，它们可以扩展HTML的功能，使得HTML能够更好地与应用程序的数据模型交互。

我们来看一下如何创建一个自定义的AngularJS指令。在AngularJS中，我们使用angular.module().directive()来定义一个新的指令。这个directive函数接收两个参数：指令的名字（通常是一个驼峰命名的字符串）和一个配置对象或函数。配置对象包含了关于指令行为、模板、控制器等的信息。


angular.module('myApp').directive('typeahead', function() {

 return {

 restrict: 'A',

 templateUrl: 'typeahead-template.html',

 scope: {

 source: '&',

 onSelect: '&'

 },

 link: function(scope, element, attrs) {

 //连接函数中的实现}

 };

});

在这个例子中，restrict: 'A'表示指令可以通过属性形式使用，templateUrl指定了用于渲染的HTML模板，scope定义了指令作用域，source和onSelect是两个属性绑定，用于获取外部数据源和选择事件的回调函数。在link函数中，我们将实现输入框的监听和数据更新逻辑。可能包括对ng-model的监控，以便在用户输入时触发查询，并使用source函数获取匹配的建议数据。当用户选择一个建议项时，onSelect函数会被调用，通常会更新父作用域中的数据。

typeahead-template.html模板将定义用户看到的UI元素，如输入框和搜索结果列表。模板通常会包含一个<;input>;元素，其ng-model绑定到当前输入值，以及一个<;ul>;元素显示搜索结果，ng-repeat指令用来迭代source返回的建议列表。此外，为了使这个指令更具可重用性和灵活性，我们可以添加更多的配置选项，例如设置最小输入长度、延迟查询以减少不必要的请求、支持异步数据加载等。

开发者可以在HTML中像这样使用这个自定义typeahead指令：


<input ng-model='\"selected\"' source='\"search($query)\"' type='\"text\"' typeahead=""/>

这里，search是一个在父控制器中的方法，它接收用户的输入作为参数并返回匹配的建议。selected则保存用户选定的值。