Add to controller angularjs instead use jquery ready function

Question

I have problem, I'm using $(document).ready() in Jquery, and now I want to modify it by using angular.element(document).ready() This is my code Jquery:

$(document).ready(function () {
  $(".bxslider").bxSlider({
      mode: 'fade',
      caption: true,
      auto: true,
      speed: 1000
  });
});

This is my code in Angularjs:

angular.module('webApp')
  .controller('clientCtrl', function($scope) {
    $scope.init = function ()
    {
        angular.element(document).ready(function () {
            $(".bxslider").bxSlider({
                mode: 'fade',
                caption: true,
                auto: true,
                speed: 1000
            });
        });
    }

  })

And this is code in Html:

<div class="our-clients" ng-controller="clientCtrl" ng-init="init()">
<ul class="bxslider">
    <li>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
          <a href=""><img src="images/kfc.png" alt="kfc" class="grayscale-logo-client" /></a>
                    </div>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
           <a href=""><img src="images/pixel.png" alt="pixel" class="grayscale-logo-client" /></a>
                    </div>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
            <a href=""><img src="images/country.png" alt="country" class="grayscale-logo-client" /></a>
                    </div>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
            <a href=""><img src="images/covex.png" alt="covex" class="grayscale-logo-client" /></a>
                    </div>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
            <a href=""><img src="images/book.png" alt="book" class="grayscale-logo-client" /></a>
                    </div>
      </li>
 </ul>

My slider still works, but I got an error message: TypeError: Cannot read property 'childNodes' of undefined

Please give me a way to solve it.

It could be because angular hasn't finished rendering your controller. I haven't done any DOM manipulation in the controller as its bad practice but i believe the ready event fires then Angular does it things altering the DOM. You really should put this into a directive. Then there's no need for the ready event. It also give you a jquery object too. — ste2425
– ste2425, Commented Nov 9, 2015 at 8:22

jjimenez · Accepted Answer · 2015-11-09 08:57:35Z

1

As @ste2425 said, it's not a good practice to manipulate the DOM from a controller, and probably that is your problem.

Instead of do it in the controller, you should do all DOM's manipulations from a directive. Please, take a look to AngularJS documentation about directives, and take a look to the link (and post-link) functions, where I think you should do your manipulations.

answered Nov 9, 2015 at 8:57

jjimenez

9031 gold badge8 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Add to controller angularjs instead use jquery ready function

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