我正在使用Chrome在localhost:8080上运行应用。光滑的轮播在主root/client/index.html中获取JQuery和slick.js就好了，但是当从另一个模板文件{{1> 动态路由调用到视图时失败了}}
以下代码有效：
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我怀疑它是JQuery vs Angular issue或来自<!-- 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>
而不是file://的服务，但我已经尝试了两者并且轮播仍无法正常工作，看起来像正常的div堆叠在一起。
答案 0 :(得分：0)
看起来你有一个链接问题。您在此处使用绝对路径，例如：
<script src="/assets/js/foundation.js"></script>
尝试使用相对路径加载文件。