Run JQuery code after Angular is done rendering

Question

I am very new to Angular JS hence this question may be really stupid. It has also been discussed in couple of questions on SO but I couldn't make anything out of it.

I am trying to do a seemingly very simple thing but it has been very difficult. I am trying to run a JQuery code after the HTML is rendered by Angular.

I have been trying this for over 10 hours, but nothing works, please help!

This is the JQuery code:-

$(".scrollable-quotes").slick({
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear'
});

It basically runs a slider library that is included in my index.html. My index.html is as follows:-

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>My Ang App</title>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="scripts/slick/slick.min.js"></script>

  </head>

  <body ng-app="EBSheadlessDrupal" onload="StartMove()">
    <ion-nav-view></ion-nav-view>

    <!-- build:js scripts/vendor.js -->
    <!-- <script src="vendor/someContribJs.js"></script> -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/collide/collide.js"></script>
    <script src="bower_components/ionic/release/js/ionic.js"></script>
    <script src="bower_components/ionic/release/js/ionic-angular.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js scripts/scripts.js -->
      <script src="scripts/app.js"></script>
      <script src="scripts/services.js"></script>
      <script src="scripts/controllers.js"></script>
    <!-- endbuild -->

</body>
</html>

Here's my controllers.js

'use strict';
angular.module('EBSheadlessDrupal.controllers', [])


// Controller that pulls events list from our services.
.controller('EventIndexCtrl', function($scope, EventService) {

    EventService.setups().then(function(setups){
        $scope.setups = setups.data;
        //console.log($scope.setups);
    });
})


// Controller that pulls events list from our services, and binds it to an individual view for display on the detail page.
.controller('EventDetailCtrl', function($scope, $stateParams, EventService) {

    var id = $stateParams.id;

    EventService.setups().then(function(setups){
        EventService.setup(setups.data,id, function(setup){
            $scope.setup = setup;
            //console.log($scope.setup);
            });
        });
    })

    // Controller that pulls events list from our services.
.controller('WhatIndexCtrl', function($scope, WhatService) {

    WhatService.whats().then(function(whats){
        $scope.whats = whats.data;
        //console.log($scope.whats);
    });
})


// Controller that pulls events list from our services, and binds it to an individual view for display on the detail page.
.controller('WhatDetailCtrl', function($scope, $stateParams, WhatService) {

    var id = $stateParams.id;

    WhatService.whats().then(function(whats){

        angular.element(document).ready(function () {
            document.getElementById('body').addClass("asdasdasd");

        });

        WhatService.what(whats.data,id, function(what){
            $scope.what = what;
            console.log($scope.what);
            });
        });
    })

// Controller that pulls single node JSON from our services, and binds to about.
    .controller('UserCtrl', function($scope, UserService) {

    UserService.user().then(function(user){
        $scope.user = user.data;
        //console.log($scope.user);
    });
})

// Controller that pulls single node JSON from our services, and binds to about.
    .controller('NodeCtrl', function($scope, NodeService) {

    NodeService.node().then(function(node){
        $scope.node = node.data;
        //console.log($scope.node);
    }, function(err) {
        alert(err.status + ' ' + err.statusText);
    });
})

//user login
.controller('AppCtrl', function() {
});

It's needed in WhatService.whats().then(function(whats). This is what I tried in the function, but it didn't work:-

angular.element(".scrollable-quotes").slick({
              infinite: true,
              speed: 500,
              fade: true,
              cssEase: 'linear'
});

And where are you trying to run your jquery code? Like which file is it in? Because jquery won't find it if angular hasn't initialized it yet — Binvention
– Binvention, Commented Mar 7, 2016 at 0:26
Did you find the solution? I need the same functionality but am still unable to fix this. — TechTurtle
– TechTurtle, Commented Aug 16, 2016 at 13:16

charlietfl · Accepted Answer · 2016-03-07 01:24:55Z

1

This needs to be done in a directive so you are assured the element exists when code is run. When jQuery.js is loaded in page before angular.js the element in link function is a jQuery object

Somewhere in template:

<div slick >Slick content</div>

Directive

angular.module('myMainApp', function(){
   return {
      restrict:'A',
      link:function(scope, element, attrs){
         element.slick({
           infinite: true,
           speed: 500,
           fade: true,
           cssEase: 'linear'
        });
      }
   }    
});

if you need time for data to render in view first you can inject $timeout nd wrap initialization code in it so it gets pushed to end of digest cycle

answered Mar 7, 2016 at 1:24

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Hellfish80 · Accepted Answer · 2016-03-07 00:08:04Z

1

Angular.element is using jqlite which is a light versus of jQuery. I'm not familiar with slick but have you tried executing your code like this: $(".scrollable-quotes").slick...

Basically like you have it stated in the first code block. If you have the full jQuery used in your included scripts, so $ should be defined for the full jQuery.

answered Mar 7, 2016 at 0:08

Hellfish80

1,6852 gold badges17 silver badges20 bronze badges

3 Comments

Steve Over a year ago

I did try $(".scrollable-quotes").slick but it didn't work. May be I am initializing it at a wrong place? I am just putting it in index.html or in templates

Binvention Over a year ago

If jquery is loaded into the page before angular then angular.element inherits from the full jquery so it has the full functionality of full jquery with less bugs then trying to use $ with angular

Hellfish80 Over a year ago

I stand corrected. @Binvention is right about that how angular includes jQuery. Are you sure your code is getting to the slick call as you expect? If it is then you'll also want to check that an element with a "scrollable-quotes" is on the page at that time too. What is the value of $(".scrollable-quotes").length? Is there a way to create a simplified version of the code you have to rule out other things?

Collectives™ on Stack Overflow

Run JQuery code after Angular is done rendering

This is the JQuery code:-

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

This is the JQuery code:-

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related