jQueryオートコンプリート+ AngularJSの問題

Question

私のページでAjgularJSを使用していますが、jqueryuiからオートコンプリートを使用するフィールドを追加したいのですが、オートコンプリートはajax呼び出しを起動しません。

私はアンギュラ（ng-appとng-controller）のないページでスクリプトをテストしましたが、正常に動作しますが、anglejsを持つページにスクリプトを置くと動作しなくなります。

jqueryのスクリプト：

$(function() { 

    $('#txtProduct').autocomplete({ 
     source: function (request, response) { 

      alert(request.term); 

     }, 
     minLength: 3, 
     select: function (event, ui) { 

     } 
    }); 

}); 

• 興味深い注：私はクロームインスペクタでスクリプトを呼び出すときに、オートコンプリートが動作を開始!!!
• バージョン：AngularJS：1.0.2 - JqueryUI：1.9.0

結論： jQueryUIからオートコンプリートウィジェット例としてAngularJSのカスタム指示内部から初期化しなければならない：

マークアップ

<div ng-app="TestApp"> 
    <h2>index</h2> 
    <div ng-controller="TestCtrl"> 

     <input type="text" auto-complete>ddd</input> 

    </div> 
</div> 

角度スクリプト

<script type="text/javascript"> 

    var app = angular.module('TestApp', []); 

    function TestCtrl($scope) { } 

    app.directive('autoComplete', function() { 
     return function postLink(scope, iElement, iAttrs) { 

      $(function() { 
       $(iElement).autocomplete({ 
        source: function (req, resp) { 
         alert(req.term); 
        } 
       }); 
      }); 

     } 
    }); 

</script> 

Answer 1

おそらく、あなたは自分のDOM要素を設定し、イベントのバインディングを行う、あなたのデータを取得するためにサービスを使用するディレクティブを使用して...つまり、「角度の道」でそれを行う必要があり、角度で依存性注入の良さを生かし、すべてのながらやって...あなたのオートコンプリートのデータを取得するために... ...あなたのビジネスロジックを実行するために

app.factory('autoCompleteDataService', [function() { 
    return { 
     getSource: function() { 
      //this is where you'd set up your source... could be an external source, I suppose. 'something.php' 
      return ['apples', 'oranges', 'bananas']; 
     } 
    } 
}]); 

ディレクティブを

サービスをコントローラを使用オートコンプリートプラグインを設定する作業。

app.directive('autoComplete', function(autoCompleteDataService) { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
        // elem is a jquery lite object if jquery is not present, 
        // but with jquery and jquery ui, it will be a full jquery object. 
      elem.autocomplete({ 
       source: autoCompleteDataService.getSource(), //from your service 
       minLength: 2 
      }); 
     } 
    }; 
}); 

これをマークアップで使用すると、ng-modelが$ scopeの値を選択したものに設定することに注意してください。

<div ng-controller="Ctrl1"> 
    <input type="text" ng-model="foo" auto-complete/> 
    Foo = {{foo}} 
</div> 

これは単なる基本ですが、うまくいけば助かります。

Answer 2

$ httpサービスを使用してこの作業を行うには、もう少し作業が必要でした。

サービス：

app.factory("AutoCompleteService", ["$http", function ($http) { 
    return { 
     search: function (term) { 
      return $http.get("http://YourServiceUrl.com/" + term).then(function (response) { 
       return response.data; 
      }); 
     } 
    }; 
}]); 

ディレクティブ：

app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) { 
    return { 
     restrict: "A", 
     link: function (scope, elem, attr, ctrl) { 
      elem.autocomplete({ 
       source: function (searchTerm, response) { 
        AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) { 
         response($.map(autocompleteResults, function (autocompleteResult) { 
          return { 
           label: autocompleteResult.YourDisplayProperty, 
           value: autocompleteResult 
          } 
         })) 
        }); 
       }, 
       minLength: 3, 
       select: function (event, selectedItem) { 
        // Do something with the selected item, e.g. 
        scope.yourObject= selectedItem.item.value; 
        scope.$apply(); 
        event.preventDefault(); 
       } 
      }); 
     } 
    }; 
}]); 

HTML：

<input ng-model="YourObject" autocomplete />