jQuery滑块在angularjs中不起作用答案

【问题标题】：jQuery slider not working in angularjsjQuery滑块在angularjs中不起作用
【发布时间】：2014-07-18 12:30:46
【问题描述】：

我的滑块在第一次导航页面时不会出现。但是，当我硬刷新页面时，它会出现，如果我用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();

【问题讨论】：

我不是媒介，能不能给个frontCtrl代码？

标签： node.js angularjs express angularjs-directive mean-stack

【解决方案1】：

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

【讨论】：

演示 +1 太棒了，谢谢，你能帮我提供一些资源/链接，以获取这些角度的东西
@tasseKATT - 这对我造成了完全相同的问题！感谢您的指导。
您也可以将脚本代码移动到 .html 视图文件中。这可能会更好，谢谢。