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

Question

我在 angularjs 函数中使用 jquery slider 。但脚本文件在 Angular Controller 内不起作用。我正在使用以下代码，

 $(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>

在这里，我打印了一条警报消息，但警报消息也没有在加载函数内打印。 slider 在这里不起作用。请帮助我如何调用加载函数。

Answer 1

我正在使用以下代码。它运行完美。

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

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

这是我正在使用的。我刚刚在使用 Controller URL 的地方调用了 $scope.load 函数。现在该功能正在运行。