我尝试在angularjs项目中使用我的html模板但是当我尝试将滑块从Index.html移动到其他html文件时无法正常显示enter image description here
这是原来的
当将其移动到其他文件时，页面的所有其他部分都正常工作
这是index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<base href="/">
<meta charset="utf-8">
<title>*</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/revolution-slider.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/flaticon.css" rel="stylesheet">
<link href="css/owl.css" rel="stylesheet">
<link href="css/jquery.fancybox.css" rel="stylesheet">
<link href="css/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<link href="css/masterslider/style/masterslider.css" rel="stylesheet">
<link href="css/masterslider/skins/default/style.css" rel="stylesheet">
<link href="css/masterslider/style/ms-vertical.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<div class="page-wrapper">
<!-- Preloader -->
<div class="preloader"></div>
<!-- Main Header / header-style-two-->
<header class="main-header header-style-two">
<!-- Header Top -->
<!-- Header Top End -->
</header>
<!--End Main Header -->
<div ng-view></div>
<!--Main Footer-->
</div>
<!--End pagewrapper-->
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target="html"><span class="fa fa-long-arrow-up"></span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-touch.js"></script>
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
<script src="js/jquery.js"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/script.js"></script>
<script src="bower_components/angular-css/angular-css.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('myApp', ['ngRoute','angularCSS','ui.bootstrap','ngAnimate','ngTouch']);
app.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
controller: "HomeCtrl",
templateUrl: "home.html"
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
home.html的
<section class="main-slider" data-start-height="950" data-slide-overlay="yes">
<div class="tp-banner-container">
<div class="tp-banner">
<ul>
<li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/main-slider/s1.jpeg" data-saveperformance="off" data-title="Awesome Title Here">
<img src="images/main-slider/s1.jpeg" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<div class="tp-caption sfb sfb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="-90"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><figure class="content-image"><img src="images/main-slider/icon-1.png" alt=""></figure></div>
<div class="tp-caption sfl sfb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="30"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><h2>The Delicous Food Tasts</h2></div>
<div class="tp-caption sfr sfb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="120"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><div class="text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.Sed<br>ut perspiciatis unde omnis iste natus error sit voluptatem accusantium </div></div>
<div class="tp-caption sfl sfb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="200"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><a href="#" class="theme-btn btn-style-one">Buy Now</a></div>
</li>
<li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/main-slider/s2.jpg" data-saveperformance="off" data-title="Awesome Title Here">
<img src="images/main-slider/s2.jpg" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<div class="tp-caption sfb sfb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="-90"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><figure class="content-image"><img src="images/main-slider/icon-1.png" alt=""></figure></div>
<div class="tp-caption sfl sfb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="30"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><h2>The Delicous Food Tasts</h2></div>
<div class="tp-caption sfr sfb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="120"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><div class="text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.Sed<br>ut perspiciatis unde omnis iste natus error sit voluptatem accusantium </div></div>
<div class="tp-caption sfl sfb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="200"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><a href="#" class="theme-btn btn-style-one">Buy Now</a></div>
</li>
<li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/main-slider/s3.jpg" data-saveperformance="off" data-title="Awesome Title Here">
<img src="images/main-slider/s3.jpg" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<div class="tp-caption sfb sfb tp-resizeme"
data-x="left" data-hoffset="30"
data-y="center" data-voffset="-90"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><figure class="content-image"><img src="images/main-slider/icon-2.png" alt=""></figure></div>
<div class="tp-caption sfl sfb tp-resizeme"
data-x="left" data-hoffset="30"
data-y="center" data-voffset="30"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><h2>The Fresh And Tasty Burgers</h2></div>
<div class="tp-caption sfr sfb tp-resizeme"
data-x="left" data-hoffset="30"
data-y="center" data-voffset="120"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><div class="text text-left">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque <br>aperiam.Sed ut perspiciatis unde omnis iste natus error sit </div></div>
<div class="tp-caption sfl sfb tp-resizeme"
data-x="left" data-hoffset="30"
data-y="center" data-voffset="200"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><a href="#" class="theme-btn btn-style-one">Buy Now</a></div>
<div class="tp-caption sfb sfb tp-resizeme"
data-x="right" data-hoffset="0"
data-y="center" data-voffset="-40"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.3"
data-endspeed="1200"
data-endeasing="Power4.easeIn"><figure class="content-image"><img src="images/main-slider/content-image.png" alt=""></figure></div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
</section>
答案 0 :(得分：0)
当您为Angular应用程序使用jQuery插件时，您会遇到一个常见错误：执行JS时，未加载HTML模板。
可能这就是你遇到这个问题的原因，当你把代码放在索引文件中时，HTML已经在执行JS时被加载了，但是当你放入模板时，JS被执行了，不要找到任何元素，然后找到元素“appers”。
一个好的解决方案是将所有jQuery代码放在一个指令中并使用direct。您可以查看此answer。
但是对于你的情况，同样的人已经按照我刚才所说的做了，你可以使用“迁移”代码，看看angular-revolution lib ..