Tri*_*der 2 node.js express angularjs angularjs-directive mean-stack
我的滑块不会在第一次导航页面时出现.然而,当我硬刷新页面然后它出现时,如果我用页面内容替换<div ng-view></div>代码,front.html那么滑块也开始工作.让我知道我在角度上做错了什么,因为我认为这是我所缺少的基本功能.
以下是我的布局代码 -
<!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>
以下是我的主控制器代码 -
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/pages/front.html',
controller: 'frontCtrl'
})
});
在front.html我有滑块代码 -
<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控制台中编写此代码,那么滑块也会开始工作但不会在页面加载时 -
jQuery('.flexslider').flexslider();
tas*_*ATT 14
附加的事件处理程序jQuery(window).load将在页面完全加载时运行.但是,ng-view尚未加载您的视图,这意味着<div class="flexslider">不存在.
将初始化移动到指令中:
myApp.directive('flexslider', function () {
return {
link: function (scope, element, attrs) {
element.flexslider({
animation: "slide"
});
}
}
});
并使用这样的:
<div class="flexslider" flexslider>
演示: http ://plnkr.co/edit/aVC9fnRhMkKw3xfpm4No?p=preview