insert jquery into angular http request

Question

Have looked for an answer here but couldn't find one. May just be searching for the wrong thing!

I am trying to run some jquery after loading json data via angulars http.get. The problem is I can't get the jquery to work and wondered if anybody knew why.

The request works fine and loads the data, it is just the $('.verb').fadeIn(600); that doesn't work. The console.log works fine.

I have a suspicion it is something to do with the jquery trying to run before the element is loaded into the DOM, but wherever I put the jquery it doesn't work.

The code I have is:

(function () {
    var app = angular.module('verbsApp', []);

    app.controller("PostsCtrl", function ($scope, $http) {
        $http.get('data/verbData.min.json').
        success(function (verbData) {

            $('.verb').fadeIn(600);
            console.log('success');

            $scope.passedData = verbData.data;
            console.log($scope.passedData);
        }).
        error(function (verbData) {
            // log error
            console.log('error');
        });

    });

})();

Dont mix jQuery and Angular! - Should be using css transitions that apply when the data comes back (ng-class) - but the problem also may be that you call fadeIn before you assign the data. — tymeJV
– tymeJV, Commented Dec 20, 2014 at 17:58
Thanks for the responses. I will have a look at ng-class and ng-animate. Quite new to Angular so still finding my way round it. With regards to the eval statement, how would that work in the context of the example I provided? — Clay
– Clay, Commented Dec 20, 2014 at 20:06

Idkt · Accepted Answer · 2014-12-20 20:13:02Z

1

First of all, you're mixing jQuery & angularJS, which you shouldn't. Secondly, Angular's ngShow, for example, makes it easy to show/hide elements based on events.

So basically, in your controller;

$scope.showVerb = false;
$http.get(…).success(function (result) {
    …
    $scope.showVerb = true;
    …
});

And your HTML would correspondingly be like;

<div class="verb" ng-show="showVerb">
    …
</div>

You can choose to animate the show/hide: http://scotch.io/tutorials/javascript/animating-angular-apps-ngshow-and-nghide

answered Dec 20, 2014 at 20:13

Idkt

3,0034 gold badges29 silver badges48 bronze badges

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

2 Comments

Clay Over a year ago

Thanks for that. That works a treat. Cant get animate to work though. Do you know what syntax for animating the show would be? All the examples I've seen rely on a click or hover event, whereas I want the animation to trigger on page load. This is perhaps a different question though. Many thanks.

Clay Over a year ago

Found the answer to the animation part. link

Collectives™ on Stack Overflow

insert jquery into angular http request

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related