AngularJS directive Extension Based on jQueryUIAutocomplete

The previous articles briefly introduced AngularJS, which is an important concept in AngularJS directive (directive). It is mainly responsible for most of the interactions between build styles. Previously, we introduced that directive needs to compile a template in advance to return a link function, register behavior event interaction, and so on. In... SyntaxHighlighter. al

The previous articles briefly introduced AngularJS, which is an important concept in AngularJS directive (directive). It is mainly responsible for most of the interactions between build styles. Previously, we introduced that directive needs to compile a template in advance to return a link function, register behavior event interaction, and so on. I will not talk about the instructions here. The instructions will be added later. Here we will first look at an AngularJS Autocomplete command developed using jQuery UI components.
Code: jsfiddle online test
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 :""
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 );
In the command, you must mark html attribute green-autocomplete = "" reference.
And some special options:
 
Remote: (Boolean) indicates whether a Remote call is performed. If true, source is the url, and false is an attribute or function in the scope.
Source: Data Source, url, scope attribute, or function.
Min-length: minimum length of the drop-down bar.
Position-my, position-at: jQuery drop-down display style
Start-with: (Boolean) whether it is a prefix or not. The default value is false (inclusive ).
Max-items: displays the maximum number of drop-down items.

 
Test code:
Html: 1
2
3Tags (variable ):
4
5
6

7 {val }}
8
9
10Tags (function ):
11
12
13
{Val_Array }}
14 http: // XX/XX. php? Term = {0}
15
16Tags (url ):
17
18
19

20 {val_url }}
21
Javascript:
1 // test controller
2 var test = function ($ scope ){
3 $ scope. availableTags = [
4 "ActionScript ",
5 "AppleScript ",
6 "Asp ",
7 "BASIC ",
8 "C ",
9 "C ++ ",
10 "Clojure ",
11 "COBOL ",
12 "ColdFusion ",
13 "Erlang ",
14 "Fortran ",
15 "Groovy ",
16 "Haskell ",
17 "Java ",
18 "JavaScript ",
19 "Lisp ",
20 "Perl ",
21 "PHP ",
22 "Python ",
23 "Ruby ",
24 "Scala ",
25 "Scheme"
26];
27
28 $ scope. getsource = function (pattern, response ){
29 response ($ scope. availableTags );
30 };
31 $ scope. change = function (){
32 console. log ('change', $ scope. val_Array );
33 };
34 };
35
36 appMoule. controller ("Test", test );
37 // mock ajax.
38 var oldAjax = jQuery. ajax;
39 jQuery. ajax = function (param ){
40 if (param. url = "url "){
41 var term = param. data. term;
42 param. success ([term + "1", term + "2", 3 + term, 4 + term]);
43}
44 else {
45 oldAjax (param );
46}
47 };
48
49 // jQuery. ajax ({url: "text.html"}); must erroe: GET http://fiddle.jshell.net/_display/text.html 404 (not found)
 
In the test, in order to verify the url, I wanted to import json data through my blog, but there were cross-domain issues, so I couldn't help it. At last I chose mock jQuery. ajax. I wanted to introduce the jasmine testing framework and use the spyOn (jasmine to test the mock documentation:
However, the online reference package was not found for a long time. Finally, the manual blood mock code is as follows:
1 // mock ajax.
2 var oldAjax = jQuery. ajax;
3 jQuery. ajax = function (param ){
4 if (param. url = "url "){
5 var term = param. data. term;
6 param. success ([term + "1", term + "2", 3 + term, 4 + term]);
7}
8 else {
9 oldAjax (param );
10}
11 };

So the third return value you see will always be the input prefix plus 1, 2, 3.
Test the scope attribute in the first input box, test the scope function (with two input parameters), and test the url ajax.