ページでAjgularJSを使用していて、jqueryuiからのオートコンプリートを使用するフィールドを追加したいのですが、オートコンプリートがajax呼び出しを起動しません。
angular(ng-app and ng-controller))のないページでスクリプトをテストしましたが、うまく機能しますが、angularjsのあるページにスクリプトを置くと、機能しなくなります。
何か案が?
jqueryスクリプト:
$(function () {
$('#txtProduct').autocomplete({
source: function (request, response) {
alert(request.term);
},
minLength: 3,
select: function (event, ui) {
}
});
});
CONCLUSION: 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>
おそらく「角度のある方法」でそれを行う必要があるだけです...つまり、ディレクティブを使用してDOM要素を設定し、イベントバインディングを実行し、サービスを使用してデータを取得し、コントローラーを使用してビジネスを実行します。ロジック...すべてAngularである依存性注入の良さを活用しながら...
オートコンプリートデータを取得するサービス...
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>
これは基本的なことですが、うまくいけば役に立ちます。
$ 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 />