How to make ng-click function wait for jQuery script to finish before executing?

Question

I need to clear a ul list of current items before making a REST call to Flickr's API which would then fill it again with 20 items. At the moment these are being run simultaneously which causes the list to remain with 0 items despite grabbing 20 new ones.

The REST call is currently sitting inside one of my services. From my searches I've found two possible solutions, $timeout and $viewContentLoaded, or possibly combining them into one solution. However, in my case I can't figure out how I would implement this for it to work properly.

Script to execute before anything else:

JQuery Code:

$('#fav-tags-list').on('click', 'li', function() {

    $('#images-list').children('li').remove();
    $('#fav-tags-list li').removeClass('selected');
    $(this).addClass('selected');
});

The function that gets called by the ng-click (getImages):

flickrApp.service('shared', function() {
    var imageGroup = [];

    return {
        getImages: function(tag) {

            if (tag === false) {
                var options = {
                    format: 'json',
                    tagmode: 'ANY'
                }
            }
            else {
                var options = {
                    format: 'json',
                    tags: tag,
                    tagmode: 'ANY'
                }
            }

            $.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', options, function(data) {

                $.each(data.items, function(i, image) {

                    imageGroup.push(data.items[i]);
                });
            });

            return imageGroup;
        }
    };
});

Markup for the ng-click (stripped of attributes):

<ul id="fav-tags-list">
    <li ng-repeat="tag in tagsList" ng-bind="tag"
        ng-click="shared.getImages(tag)"></li>
</ul>

EDIT: As requested here's how I consumed the service:

flickrApp.controller('flickrCtrl', ['$scope', '$firebase', 'shared', function($scope, $firebase, shared) {

    $scope.shared = shared;

    //Get a set of images on pageload
    $scope.imageGroup = shared.getImages(false);

}]);

I'm not even sure this is what I'm looking for here, so I'd appreciate some guidance.

don't use jquery inside angular code..use $http.get or $resource..that will create a bottle neck for digest cycle to run — Pankaj Parkar
– Pankaj Parkar, Commented Feb 7, 2015 at 20:28
Totally forgot about $http.get.. will change and update question. — Chrillewoodz
– Chrillewoodz, Commented Feb 7, 2015 at 20:31
Thats wrong code inside service..could you please add you controller code..i want to see how you are consuming service..seems like service is not returning any promise.. — Pankaj Parkar
– Pankaj Parkar, Commented Feb 7, 2015 at 20:36
@pankajparkar I've cut out some functions from my return in the service, but overall it works as intended. When using $http.get I can't get access to the API, it just throws access violation errors all over the place that's why I had to use $.getJSON instead to achieve what I wanted. — Chrillewoodz
– Chrillewoodz, Commented Feb 7, 2015 at 20:42
then you may need to run angular $digest cycle by your own.to update scope variable using $scope.$apply() — Pankaj Parkar
– Pankaj Parkar, Commented Feb 7, 2015 at 20:48

Matan Gubkin · Accepted Answer · 2015-02-07 21:48:27Z

1

if you're trying to make a delay when a function is called your could do something like this:

<html>
<button ng-click="do()"></button>
</html>

<script>

    $scope.do = function() {
        $timeout( function(){
             //your code here
        },10000, true );
    }
<script>

or a more efficient way to do the same thing is to just wrap it with timeout()

answered Feb 7, 2015 at 21:48

Matan Gubkin

3,2096 gold badges29 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make ng-click function wait for jQuery script to finish before executing?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related