我的 slider 不会出现在页面的第一次导航中。但是,当我硬刷新页面时,它会出现,而且如果我替换 <div ng-view></div>
代码与 front.html
页面内容然后 slider 也开始工作。让我知道我在 Angular 上做错了什么,因为我认为这是我缺少的基本内容。
以下是我的布局代码-
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>WEBSITE</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.flexslider.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="controllers/mainController.js"></script>
<script>
jQuery(document).ready(function($) {
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide"
});
});
});
</script>
</head>
<body ng-controller="mainController">
<header ng-include="'includes/header.html'"></header>
<nav ng-include="'includes/navmenu.html'"></nav>
<div ng-view></div>
<footer ng-include="'includes/footer.html'"></footer>
</body>
</html>
以下是我的主 Controller 代码-
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/pages/front.html',
controller: 'frontCtrl'
})
});
在 front.html 我有 slider 代码 -
<div class="flexslider">
<ul class="slides">
<li>
<img src="assets/images/banner1.jpg">
</li>
<li>
<img src="assets/images/banner2.jpg">
</li>
<li>
<img src="assets/images/banner3.jpg">
</li>
<li>
<img src="assets/images/banner4.jpg">
</li>
</ul>
</div>
编辑 -
如果我也在 Firebug 控制台中编写此代码,则 slider 也会开始工作但不会在页面加载时 -
jQuery('.flexslider').flexslider();
最佳答案
jQuery(window).load
附带的事件处理程序将在页面完全加载时运行。然而,ng-view
尚未加载您的 View ,这意味着 <div class="flexslider">
不存在。
将初始化移动到指令中:
myApp.directive('flexslider', function () {
return {
link: function (scope, element, attrs) {
element.flexslider({
animation: "slide"
});
}
}
});
然后像这样使用:
<div class="flexslider" flexslider>
关于node.js - jQuery slider 在 angularjs 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23925929/