jQuery滑块在angularjs中不起作用

我的滑块不会在第一次导航时出现。然而，当我硬刷新页面时，它就会出现，如果我用front.html页面内容替换<div ng-view></div>代码，那么滑块也会开始工作。让我知道我在角度上做错了什么，因为我相信这是我缺少的一些基本的东西。

下面是我的布局代码

<!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();

附加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

相关内容

最新更新

热门标签：