基于jQueryUIAutocomplete的AngularJS指令（directive）扩展
在前几篇随笔简单介绍了AngularJS，在AngularJS 指令（directive）是重要的概念，主要负责了很大部分的组建样式交互。在前面介绍过directive需要预先的模板编译在返回一个link的函数，注册行为事件交互等等。在这里不多说了，关于指令的介绍将在后续一并补上。在这里我们先看一个利用jQuery UI组件开发的AngularJS Autocomplete指令。
创新互联专注于阜南网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供阜南营销型网站建设，阜南网站制作、阜南网页设计、阜南网站官网定制、微信平台小程序开发服务，打造阜南网络公司原创品牌,更为您提供阜南网站排名全网营销落地服务。
代码：jsfiddle在线测试
Directive:
1 var oldSuggest = jQuery.ui.autocomplete.prototype._suggest;
2 jQuery.ui.autocomplete.prototype._suggest = function(items) {
3 var itemsArray = items;
4 if (this.options.maxItems && this.options.maxItems > 0) {
5 itemsArray = items.slice(0, this.options.maxItems);
6 }
7 oldSuggest.call(this, itemsArray);
8 };
9
10 var autocomplete = function() {
11 var linkFun = function($scope, element, attrs) {
12 var $input = jQuery(element);
13 var responseDataSource = function($scope, source, pattern, response) {
14 var express = $scope[source];
15 var data = typeof(express) === "function" ? express(pattern, response) : express;
16 if (data) {
17 response(data);
18 }
19 };
20 var option = attrs;
21 //
22 option.position = {
23 my: attrs.positionMy,
24 at: attrs.positionAt,
25 };
26 var option = jQuery.extend({
27 position: {
28 my: "",
29 at: ""
30 },
31 close: function(event, ui) {
32 var express = attrs["ngModel"] + "='" + $input.val() + "'";
33 $scope.$apply(express);
34 $scope.$eval(attrs["ngChange"]);
35 }
36 }, option);
37 option.remote = option.remote === "true";
38 if (!option.remote) {
39 option.dataSource = attrs.source;
40 option.source = function(pattern, response) {
41 var option = $input.autocomplete("option");
42 var responseEx = function(data) {
43 var matches = jQuery.map(data, function(tag) {
44 var startWith = attrs.startWith === "true";
45 var index = tag.toUpperCase().indexOf(pattern.term.toUpperCase())
46 if ((startWith && index === 0) || (!startWith && index > -1)) {
47 return tag;
48 }
49 })
50 response(matches);
51 };
52 responseDataSource($scope, option.dataSource, pattern, responseEx);
53 };
54 } else {
55 option.source = option.source; //remote url
56 }
57 $input.autocomplete(option);
58 };
59 return linkFun;
60 };
61
62 var prefixed = "green";
63 var appMoule = angular.module('app', []);
64
2 jQuery.ui.autocomplete.prototype._suggest = function(items) {
3 var itemsArray = items;
4 if (this.options.maxItems && this.options.maxItems > 0) {
5 itemsArray = items.slice(0, this.options.maxItems);
6 }
7 oldSuggest.call(this, itemsArray);
8 };
9
10 var autocomplete = function() {
11 var linkFun = function($scope, element, attrs) {
12 var $input = jQuery(element);
13 var responseDataSource = function($scope, source, pattern, response) {
14 var express = $scope[source];
15 var data = typeof(express) === "function" ? express(pattern, response) : express;
16 if (data) {
17 response(data);
18 }
19 };
20 var option = attrs;
21 //
22 option.position = {
23 my: attrs.positionMy,
24 at: attrs.positionAt,
25 };
26 var option = jQuery.extend({
27 position: {
28 my: "",
29 at: ""
30 },
31 close: function(event, ui) {
32 var express = attrs["ngModel"] + "='" + $input.val() + "'";
33 $scope.$apply(express);
34 $scope.$eval(attrs["ngChange"]);
35 }
36 }, option);
37 option.remote = option.remote === "true";
38 if (!option.remote) {
39 option.dataSource = attrs.source;
40 option.source = function(pattern, response) {
41 var option = $input.autocomplete("option");
42 var responseEx = function(data) {
43 var matches = jQuery.map(data, function(tag) {
44 var startWith = attrs.startWith === "true";
45 var index = tag.toUpperCase().indexOf(pattern.term.toUpperCase())
46 if ((startWith && index === 0) || (!startWith && index > -1)) {
47 return tag;
48 }
49 })
50 response(matches);
51 };
52 responseDataSource($scope, option.dataSource, pattern, responseEx);
53 };
54 } else {
55 option.source = option.source; //remote url
56 }
57 $input.autocomplete(option);
58 };
59 return linkFun;
60 };
61
62 var prefixed = "green";
63 var appMoule = angular.module('app', []);
64
65 appMoule.directive(prefixed + "Autocomplete", autocomplete);
在指令中主需要标注html attributegreen-autocomplete=””引用.
以及一些特殊option：
- Remote：(Boolean)是否为远程调用，true则source为url，false则为scope上的一个属性或者函数。
- Source：数据源，url、scope属性或者函数。
- min-length：开始显示下拉条的最小长度。
- position-my，position-at：jQuery下拉条显示样式
- start-with：（Boolean)是否为以前缀开始的帅选，默认false（包含）。
- max-items：显示最大下拉项数目。
测试代码：
html： 1
2
3Tags(变量):
4
5
3
4
5
6
7 `val`
8
9
10
11
12
13
`val_Array`
14 http://XX/XX.php?term={0}
15
16
17
18
19
20 `val_url`
21