基於jQuery UI Autocomplete的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 

65 appMoule.directive(prefixed + "Autocomplete", autocomplete); 

   在指令中主需要標注html attribute green-autocomplete=””引用.

以及一些特殊option：

1.        Remote：(Boolean)是否為遠程調用，true則source為url，false則為scope上的一個屬性或者函數。
2.        Source：數據源，url、scope屬性或者函數。
3.        min-length：開始顯示下拉條的最小長度。
4.        position-my，position-at：jQuery下拉條顯示樣式
5.       start-with：（Boolean)是否為以前綴開始的帥選，默認false（包含）。
6.    max-items：顯示最大下拉項數目。
7. 
   

 

  測試代碼：

  html： 1 <div ng-app="app" ng-controller="Test">

 
           2  
          < 
          div  
          class 
          ="ui-widget" 
          > 
          
 
           3      
          < 
          label  
          for 
          ="tags" 
          >Tags(變量):  
          </ 
          label 
          > 
          
 
           4      
          < 
          input  
          id 
          ="tags" 
           ng-model 
          ="val" 
           green-autocomplete 
          ="" 
           remote 
          ="false" 
           ng-disabled 
          ="val=='Asp'" 
           source 
          ="getsource" 
            min-length 
          ="0" 
           position-my 
          ="right top" 
           position-at 
          = "right bottom" 
            start-with 
          ="false" 
          > 
          
 
           5  
          </ 
          div 
          > 
          
 
           6  
          < 
          br 
          /> 
          
 
           7     {{val}} 
          
 
           8      
          
 
           9      
          < 
          div  
          class 
          ="ui-widget" 
          > 
          
 
          10      
          < 
          label  
          for 
          ="tags" 
          >Tags(函數):  
          </ 
          label 
          > 
          
 
          11      
          < 
          input  
          i ng-model 
          ="val_Array" 
           green-autocomplete 
          ="" 
            source 
          ="availableTags" 
           max-items 
          ="5" 
           min-length 
          ="2" 
            start-with 
          ="true" 
           ng-change 
          ="change();" 
          > 
          
 
          12  
          </ 
          div 
          > 
          
 
          13  
          < 
          br 
          />{{val_Array}} 
          
 
          14   http://XX/XX.php?term={0} 
          
 
          15      
          < 
          div  
          class 
          ="ui-widget" 
          > 
          
 
          16      
          < 
          label  
          for 
          ="tags" 
          >Tags(url):  
          </ 
          label 
          > 
          
 
          17      
          < 
          input  
          i ng-model 
          ="val_url" 
           green-autocomplete 
          ="" 
            source 
          ="url" 
           remote 
          ="true" 
           max-items 
          ="3" 
            
          > 
          
 
          18  
          </ 
          div 
          > 
          
 
          19  
          < 
          br 
          /> 
          
 
          20     {{val_url}} 
          
 
          21  
          </ 
          div 
          > 
         

  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) 

 

 在測試中為了驗證url，本想通過自己的博客導入json數據，但是跨域等問題，所以沒辦法，在最后選擇了mock jQuery.Ajax，本想引入jasmine測試框架利用spyOn(jasmine測試mock文檔：

http://pivotal.github.com/jasmine/jsdoc/symbols/jasmine.Spy.html)，但是找了很久沒找到在線引用包。最后采用手動血mock代碼如下：

  
  
  
          

   
   
   
           
 
             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  }; 
           
  
  
  
          

 所以你看見的第三個返回值永遠會是輸入前綴加1,2,3.

 測試第一輸入框測試scope屬性，第二測試scope函數（有兩個輸入參數），第三測試url ajax。