Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
5

i'm using AjgularJS on my page and want to add a field to use autocomplete from jqueryui and the autocomplete does not fires the ajax call.

i've tested the script on a page without angular (ng-app and ng-controller) and it works well, but when i put the script on a page with angularjs it stops working.

any idea?

jquery script:

$(function () {

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

            alert(request.term);

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

        }
    });

});
  • interesting note: when i call the script on Chrome inspector the autocomplete starts working!!!
  • Versions: AngularJS: 1.0.2 - JqueryUI: 1.9.0

CONCLUSION: The autocomplete widget from jQueryUI must be initializes from inside a custom directive of AngularJS as the example:

Markup

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

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

    </div>
</div>

Angular script

<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>
share|improve this question
You should try loading them in $(document).ready(); Also check for errors in firebug console. – Sachin Prasad 웃 Oct 18 '12 at 17:56
Agreed - you will need to check for conflicts between AngularJS and JQuery. There don't appear to be any in a simple test: jsfiddle.net/mccannf/w69Wt – mccannf Oct 18 '12 at 23:18
1  
It may not be relevant from the problem you are seeing, but I think you should be use jquery inside the custom directive (link function). – tosh shimayama Oct 19 '12 at 1:04
Thanks guys, the solution that work for me is the suggested by tosh, creating a custom directive for that!!! – Flavio Oliveira Oct 19 '12 at 10:38

1 Answer

up vote 9 down vote accepted

Perhaps you just need to do it in an "angular way"... that is, to use a directive to set up your DOM elements and do event bindings, use a service to get your data, and use a controller to do your business logic... all while leveraging the dependency injection goodness that is Angular...

A service to get your autocomplete data...

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'];
        }
    }
}]);

a directive to do the work of setting up the autocomplete plugin.

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

And using it in your markup... notice the ng-model to set a value on the $scope with what you select.

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

That's just the basics, but hopefully that helps.

share|improve this answer
The elem.autocomplete needs to be $(elem).autocomplete – Ash McConnell Apr 17 at 15:11
@AshMcConnell: if jQuery is registered on the page before Angular, the elem argument to the link function is a jQuery object already. So no $() required. ;) Angular is slick like that. – blesh Apr 17 at 15:13
thanks! I didn't know that, I'll check the import order when I get back to work tomorrow! (It's just the order of imports you mean?) – Ash McConnell Apr 17 at 18:31
Correct, as long as your <script src="jquery.js"></script> is before your <script src="angular.js"></script>, it should use jQuery objects rather than jqLite objects for Elements within Angular. – blesh Apr 17 at 20:34
1  
Thanks again blesh, works nicely :) – Ash McConnell Apr 18 at 6:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.