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 — callmekatootie
– callmekatootie, Commented Jul 27, 2015 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
– charlietfl, Commented Jul 27, 2015 at 12:59
Shouldn't you be loading jquery script before other scripts that rely on jquery? — pablito.aven
– pablito.aven, Commented Jul 27, 2015 at 13:06

kali dass · Accepted Answer · 2015-07-28 05:14:43Z

1

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.

answered Jul 28, 2015 at 5:14

kali dass

371 gold badge1 silver badge11 bronze badges

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

Comments

Freezystem · Accepted Answer · 2015-07-27 13:04:36Z

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, 2015 at 13:04

Freezystem

4,8831 gold badge37 silver badges38 bronze badges

4 Comments

charlietfl Over a year ago

Doesn't explain what difference would this make. Also DOm code doesn't belong in controllers

Freezystem Over a year ago

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.

charlietfl Over a year ago

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

Freezystem Over a year ago

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.

Collectives™ on Stack Overflow

How to use Jquery onload function inside angularjs?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related