如何在angularjs中使用Jquery onload函数？

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.

Answer 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.

Answer 2

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

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

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