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, Dec 20 '14 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, Dec 20 '14 at 20:06

score 1 · Accepted Answer · answered Dec 20 '14 at 20:13

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 '14 at 20:13

Ashesh

2,978
4
27
47

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 Dec 20 '14 at 23:01
Found the answer to the animation part. [link](http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load) – Clay Dec 20 '14 at 23:15

insert jquery into angular http request

1 Answers1