jQuery的滑块angularjs不工作 | jQuery的滑块angularjs不工作

本文介绍了jQuery的滑块angularjs不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的滑块不会拿出在页面的第一次航行。然而，当我硬刷新页面，然后它出现并且如果我更换＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT; code与 front.html 页面内容随后也滑块开始工作。让我知道我做错了的角，因为我相信这是基本的东西，我很想念。

以下是我的布局code -

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT;网站与LT; /标题＆GT;
＆LT;链接rel =stylesheet属性HREF =资产/ CSS / style.css文件/＆GT;
＆LT;链接rel =stylesheet属性HREF =资产/ CSS / flexslider.css类型=文/ CSS媒体=屏幕/＆GT;
＆所述; SCRIPT SRC =https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =资产/ JS / jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =资产/ JS / jquery.flexslider.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =资产/ JS / angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =资产/ JS /角route.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =控制器/ mainController.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
    jQuery的（文件）。就绪（函数（$）{
    jQuery的（窗口）.load（函数（）{
      jQuery的（'。flexslider'）。flexslider（{
        动画：幻灯片
      }）;
    }）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=mainController＆GT;
    ＆LT;头NG-包括=包括/ header.html中'＆GT;＆LT; /头＆GT;
    ＆LT;资产净值NG-包括=包括/ navmenu.html'＆GT;＆LT; / NAV＆GT;
    ＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
    ＆LT;页脚NG-包括=包括/ footer.html'＆GT;＆LT; /页脚＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

以下是我的主控制器 code -

  VAR对myApp = angular.module（'对myApp'，['ngRoute']）;myApp.config（函数（$ routeProvider）{
    $ routeProvider
        。什么时候（'/'， {
            templateUrl：意见/页/ front.html'，
            控制器：'frontCtrl
        }）
}）;

在 front.html 我有滑盖code -

 ＆LT; DIV CLASS =flexslider＆GT;
  ＆LT; UL类=幻灯片＆GT;
    ＆LT;立GT;
      ＆LT; IMG SRC =资产/图像/ banner1.jpg＆GT;
    ＆LT; /李＆GT;
    ＆LT;立GT;
      ＆LT; IMG SRC =资产/图像/ banner2.jpg＆GT;
    ＆LT; /李＆GT;
     ＆LT;立GT;
      ＆LT; IMG SRC =资产/图像/ banner3.jpg＆GT;
    ＆LT; /李＆GT;
    ＆LT;立GT;
      ＆LT; IMG SRC =资产/图像/ banner4.jpg＆GT;
    ＆LT; /李＆GT;
  ＆LT; / UL＆GT;
＆LT; / DIV＆GT;

修改 -

如果我也是在Firebug控制台写这篇code，那么也滑块开始工作，但不能在页面加载 -

 的jQuery（。flexslider'）flexslider（）;

解决方案

附事件处理程序的jQuery（窗口）.load 当页面完全加载运行。然而， NG-视图没有加载你的看法呢，这意味着＆LT; DIV CLASS =flexslider＆GT; 不存在。

移动初始化成一个指令：

  myApp.directive（'flexslider'，函数（）{  返回{
    链接：功能（范围，元素，ATTRS）{      element.flexslider（{
        动画：幻灯片
      }）;
    }
  }
}）;

和使用这样的：

 ＆LT; DIV CLASS =flexsliderflexslider＆GT;

演示：

My slider wont come up on first time navigation of the page. However when I hard refresh the page then it comes up and also if I replace the <div ng-view></div> code with the front.html page content then also the slider starts working. Let me know what I am doing wrong in angular as I believe it is something basic that I am missing.

Following is my layout code -

<!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>

Following is my main controller code -

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'views/pages/front.html',
            controller: 'frontCtrl'
        })
});

In front.html I have slider code -

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

EDIT -

If I also write this code in the Firebug console then also slider starts working but not on page load -

jQuery('.flexslider').flexslider();

解决方案

The event handler attached with jQuery(window).load will run when the page is fully loaded. However, ng-view hasn't loaded your view yet, which means <div class="flexslider"> doesn't exist.

Move the initialization into a directive:

myApp.directive('flexslider', function () {

  return {
    link: function (scope, element, attrs) {

      element.flexslider({
        animation: "slide"
      });
    }
  }
});

And use like this:

<div class="flexslider" flexslider>

Demo: http://plnkr.co/edit/aVC9fnRhMkKw3xfpm4No?p=preview

这篇关于jQuery的滑块angularjs不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！