光滑的轮播不适用于应用程序动态路由的基础

Question

我使用Chrome在localhost:8080上运行应用程序。 光滑的轮播在主root/client/index.html获取JQuery和slick.js就好了，但是当使用来自另一个模板文件root/client/templates/home.html 动态路由调用视图时失败root/client/templates/home.html 。

以下代码有效：

<!-- root/client/index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="application">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Title</title>
    <link href="/assets/css/app.css" rel="stylesheet" type="text/css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script src="/assets/js/foundation.js"></script>
    <script src="/assets/js/routes.js"></script>
    <script src="/assets/js/app.js"></script>
  </head>
  <body>
    <div class="grid-frame vertical">
      <!--Title bar-->
      <div class="grid-content shrink" style="padding: 0;">
        <div class="primary title-bar">
          <span class="title left">
            <a ur-sref="home">
              <img src="http://placehold.it/25x25">
            </a>
          </span>
          <span class="title right">
            <i class="fa fa-lg fa-bars"></i>
          </span>
        </div>
      </div>

      <!-- The problematic Slick carousel which works fine here, but not when called into the view using ui-router below -->
      <div class="img-slider grid-block shrink">
        <div class="grid-block">
          <img src="http://placehold.it/320x250">
        </div>
        <div class="grid-block">
          <img src="http://placehold.it/320x250">
        </div>
        <div class="grid-block">
          <img src="http://placehold.it/320x250">
        </div>
      </div>

      <!-- Uncomment this part to call the above carousel from another template
      <div ng-class="['ui-animation']" ui-view class="hole grid-block wrap"></div>
      -->

    </div>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>     
    <!-- Looks like the template file cannot read slick.js here -->   
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('.img-slider').slick({
          autoplay: true,
          autoplaySpeed: 4000,
          arrows: true,
          dots: true,
          infinite: true,
          speed: 500,
        });
      });
    </script>
  </body>
</html>

下面的代码是上面调用ui-view部分的模板：

<!-- root/client/templates/home.html -->
---
name: home
url: /
animationIn: fadeIn
---

<div class="img-slider grid-block shrink">
  <div class="grid-block">
    <img src="http://placehold.it/320x250">
  </div>
  <div class="grid-block">
    <img src="http://placehold.it/320x250">
  </div>
  <div class="grid-block">
    <img src="http://placehold.it/320x250">
  </div>
</div>

我怀疑这是JQuery vs Angular问题或者来自file://而不是http:// ，但是我已经尝试了两者并且轮播仍然无法工作，并且看起来像普通的div堆叠在一起。

Answer 1

看起来你有一个链接问题。 您在此处使用绝对路径，例如：

<script src="/assets/js/foundation.js"></script>

尝试使用相对路径加载文件。

光滑的轮播不适用于应用程序动态路由的基础

问题描述

1 个解决方案

解决方案1
0 2015-02-16 14:52:44

光滑的轮播不适用于应用程序动态路由的基础

问题描述

1 个解决方案

解决方案1 0 2015-02-16 14:52:44

解决方案1
0 2015-02-16 14:52:44