node.js - jQuery slider 在 angularjs 中不起作用

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

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

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

关于node.js - jQuery slider 在 angularjs 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23925929/

相关文章:

javascript - Console.log 显示数组但无法返回

javascript - lodash _.remove 不适用于对象内容

deployment - 优雅地更新服务器代码

javascript - 使用 angular.js 路由手动刷新时仍然得到 'Not Found'

json - Node.js 从服务器渲染大量 JSON 数据

java - 为什么我的 Spring Data JPA 查询比 Node.JS + oracledb 慢 8 倍?

javascript - 如何使用 Socket.io 在一条消息中发送两个变量?

javascript - 将自定义参数/查询/ header 添加到 Google Cloud 函数

javascript - 无法在 Angular 上删除

javascript - Uncaught Error : [$injector:cdep] Circular dependency found: $templateRequest <- $animate <- cfpLoadingBar <- $http <- $templateRequest <- $compile