Как использовать функцию загрузки JQuery внутри angularjs?

Question

Я использую ползунок jquery внутри функции angularjs. Но файл сценария не работает внутри углового контроллера. Я использую следующий код,

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

<link rel="stylesheet" href="../bower_components/hosting.css"></link> 
 
\t <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>

Здесь я напечатал одно сообщение тревоги, но тревога тзд также не печатает внутри функции нагрузки. Ползунок здесь не работает. Пожалуйста, помогите мне, как я могу вызвать функцию загрузки.

Answer 1

Попробуйте использовать угловую $window как это внутри главного контроллера:

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

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

Answer 2

Я использую следующий код. Он работает отлично.

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

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

Это один я использую. Я просто вызвал функцию $ scope.load внутри, где я использую URL-адрес контроллера. Теперь функциональность работает.