How to use Jquery onload function inside angularjs?

Question

I am using the jquery slider inside angularjs function. But the script file is not working inside angular controller. I am using the following code,

 $(window).load(function() {
    alert("flexslider function");
      $('.flexslider').flexslider({
         animation: "slide",
   useCSS: Modernizr.touch
       });
   });

<link rel="stylesheet" href="../bower_components/hosting.css"></link>
 <link rel="stylesheet" href="../bower_components/flexslider.css"></link>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>

 <script src="../bower_components/jquery.flexslider.js" type="text/javascript"></script>
    <script src="../bower_components/modernizr.js" type="text/javascript"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>



<div ng-controller="LoginController"> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 
<div class="container">
<div class="navbar-header">
<h1>DEMURRAGE</h1>
 </div>
 
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">

<li><a href="" role="button" data-toggle="modal" data-target="#Login">Login</a></li>

</ul>


</div>
 
</div>
</nav>
 
<div class="jumbotron masthead">
<div class="container">
 
<div class="flexslider">

<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 1000%; margin-left: -2280px;">
<li class="clone" aria-hidden="true" style="width: 1140px; float: left; display: block;">
<div class="slide3">
<p class="pull-left"><img src="../bower_components/Images/server2.png" alt="server" class="img-responsive" draggable="false"></p>
<h1>Demurrage Calculator</h1>

</div>
</li>
<li class="" style="width: 1140px; float: left; display: block;">
<div class="hero-unit">
<h1>Import Cargo</h1>

</div>
</li>

<li style="width: 1140px; float: left; display: block;" class="flex-active-slide">
<div class="slide3">
<p class="pull-left"><img src="../bower_components/Images/server2.png" alt="server" class="img-responsive" draggable="false"></p>
<h1>Demurrage Calculator</h1>

</div>
</li>
<li class="clone" aria-hidden="true" style="width: 1140px; float: left; display: block;">
<div class="hero-unit">
<h1>Import Cargo</h1>

</div>
</li></ul></div><ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="">2</a></li><li><a class="flex-active">3</a></li></ol><ul class="flex-direction-nav">
<li><a class="flex-prev" href="">Previous</a></li>
<li><a class="flex-next" href="">Next</a></li></ul></div>
</div>
</div>
 
<div class="modal fade LoginSignup" id="Login" tabindex="-1" role="dialog" aria-labelledby="LoginLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h3 class="modal-title">Login</h3>
</div>
<div class="modal-body">

<div class="form-group">
<input class="form-control input-lg" type="text" name="username" size="50" ng-model='username' placeholder="username">
</div>
<div class="form-group">
<input class="form-control input-lg" type="password" id="passw" name="password" size="20" ng-model='password' placeholder="Password">
</div>
<div class="form-group">
<input type="submit" value="Login" id="login" ng-click="LoginUser()" class="btn btn-success btn-lg">
</div>
</div>
</div>
 
</div>
 
</div>

</div>

Here, I have printed one alert message, But alert msg also not printing inside the load function. Slider is not working here. Please help me how can I call load function.

possible duplicate of [Correct way to integrate Jquery plugins in Angular.js](http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angular-js) — callmekatootie, Jul 27 '15 at 12:59
should be seeing error in console `$ not defined` because you are loading jQuery after code that relies on jQuery. Should be using directives to intialize jQuery plugins — charlietfl, Jul 27 '15 at 12:59
Shouldn't you be loading jquery script before other scripts that rely on jquery? — pablito.aven, Jul 27 '15 at 13:06

score 1 · Answer 1 · answered Jul 28 '15 at 05:14

I am using the following code. It is working perfectly.

 $scope.load = function () {
      $('.flexslider').flexslider({
             animation: "slide",
       useCSS: Modernizr.touch
           });      
     }

<div ng-controller="LoginController" ng-init='load()'>

This is the one I am using. I just called the $scope.load function inside of where I am using Controller URL. Now the functionality is working.

score 0 · Answer 2 · answered Jul 27 '15 at 13:04

0

Try using angular $window like this inside your main controller :

$window.onload = function() {
    alert("flexslider function");

    $('.flexslider').flexslider({
        animation: "slide",
        useCSS: Modernizr.touch
    });
}

answered Jul 27 '15 at 13:04

Freezystem

4,494
1
32
35

Doesn't explain what difference would this make. Also DOm code doesn't belong in controllers – charlietfl Jul 27 '15 at 13:13
2

Actually using jQuery manipulation in AngularJS is a really bad practice. Here I'm just giving a hint to make window.onload function work in the angular world, regardless of the code within. In my opinion if you're using jQuery with Angular, you don't understand the real purpose and power of this framework. – Freezystem Jul 27 '15 at 13:26
somehwhat disagree when it comes to plugging in a well developed slider carousel such as this case ... vs having to create it from scratch in angular and css. To me use case might merit jusing jQuery – charlietfl Jul 27 '15 at 13:33
Yeah maybe. But DOM manipulation can be harmful to your code in certain case too, so you have to be cautious. Mixing frameworks is dangerous. jQuery is historically integrated to AngularJS because of backward compatibility, but now, with the good implementation of JS standards in browsers it tends to be deprecated. So to me it's a bit like saying : "I'm using Flash with Angular because I have ol' good plugins running on it". Things are evolving and it's never a good thing to stick with old stuff, whereas I'm pretty sure you can now find a plenty of new Angular Carousel to play with. – Freezystem Jul 27 '15 at 13:47

How to use Jquery onload function inside angularjs?

2 Answers2