我正在研究这个template,在应用程序中包含角度之后,很多功能都被打破了。不知何故设法解决了很多问题,但我无法让这个幻灯片放映正常。
这是我的HTML
<!doctype html>
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<link rel="icon" type="image/ico" href="images/fav.ico">
<!--stylesheet include-->
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/camera.css">
<link rel="stylesheet" type="text/css" media="all" href="css/owl.carousel.css">
<link rel="stylesheet" type="text/css" media="all" href="css/owl.transitions.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.custom-scrollbar.css">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="css/lightbox.css">
<!--font include-->
<link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="app">
<!--slider-->
<div class="camera_wrap m_bottom_0" ng-controller="slideShowCtrl" ng-show="slideShow()">
<div data-src="images/slide_02.jpg" data-custom-thumb="images/slide_02.jpg">
<div class="camera_caption_1 fadeFromTop t_align_c d_xs_none">
<div class="f_size_large color_light tt_uppercase slider_title_3 m_bottom_5">Meet New Theme</div>
<hr class="slider_divider d_inline_b m_bottom_5">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_45 m_sm_bottom_20"><b>Attractive & Elegant<br>HTML Theme</b></div>
<div class="color_light slider_title_2 m_bottom_45">$<b>15.00</b></div>
<a href="#" role="button" class="tr_all_hover button_type_4 bg_scheme_color color_light r_corners tt_uppercase">Buy Now</a>
</div>
</div>
<div data-src="images/slide_01.jpg" data-custom-thumb="images/slide_01.jpg">
<div class="camera_caption_2 fadeIn t_align_c d_xs_none">
<div class="f_size_large tt_uppercase slider_title_3 scheme_color">New arrivals</div>
<hr class="slider_divider type_2 m_bottom_5 d_inline_b">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_65 m_sm_bottom_20"><b><span class="scheme_color">Spring/Summer 2014</span><br><span class="color_dark">Ready-To-Wear</span></b></div>
<a href="#" role="button" class="d_sm_inline_b button_type_4 bg_scheme_color color_light r_corners tt_uppercase tr_all_hover">View Collection</a>
</div>
</div>
<div data-src="images/slide_03.jpg" data-custom-thumb="images/slide_03.jpg">
<div class="camera_caption_3 fadeFromTop t_align_c d_xs_none">
<img src="images/slider_layer_img.png" alt="" class="m_bottom_5">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_60 m_sm_bottom_20"><b class="color_dark">up to 70% off</b></div>
<a href="#" role="button" class="d_sm_inline_b button_type_4 bg_scheme_color color_light r_corners tt_uppercase tr_all_hover">Shop Now</a>
</div>
</div>
</div>
<div ng-view></div>
<!--scripts include-->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/retina.js"></script>
<script src="js/camera.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.custom-scrollbar.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-ui.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/sortable.js"></script>
<script src="js/ng-file-upload.js"></script>
<script src="js/ng-file-upload-shim.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers.js"></script>
<script src="app/factory.js"></script>
<script src="app/filters.js"></script>
</body>
</html>
我的控制器
controllers.slideShowCtrl = function($scope, $location){
$scope.slideShow = function(){
if($location.url() == '/' || $location.url() == '/home'){
$scope.slideShowView = true;
return true;
}else{
$scope.slideShowView = false;
return false;
}
}
}
这是用于创建幻灯片的jQuery
// camera slideshow
(function(){
var cs = $('.camera_wrap');
if(cs.length){
cs.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
}
})();
问题出在这里。在第一次加载或重新加载(f5)时,滑块看起来很好并且播放效果很好。
点击低谷页面再次访问主页(#/ home)后,滑块有时会中断,有时则不会,有时会自行修复。
刷新网页滑块后再次运行正常并且播放效果良好。
如果你们需要任何额外的代码,请告诉我,我会提供。
谢谢
答案 0 :(得分:1)
理论上,当您在角度视图中放置JQ幻灯片时。每次访问视图时都需要初始化。因为在视图/路径更改中,您的幻灯片将从DOM中丢弃,因此幻灯片的所有内容和实例也将被丢弃。
问题出在这里。在第一次加载或重新加载(f5)时,滑块看起来很好并且播放效果很好。
是的它应该有效,因为幻灯片显示得很初
点击低谷页面再次访问主页(#/ home)后,滑块有时会中断,有时候不会,有时它会自行修复。
幻灯片未正确初始化,因为当路径/视图更改时它从DOM中丢弃
=&GT;只需在渲染视图后再次重新初始化它就可以完成工作。
// This is a dirty patch up, and only showing the fix in most basic way. So you could understand the concept of angular with other DOM manipulation like JQ.
// You should try to study more about DOM manipulation in angular. And for better solution, you can go with directive
controllers.slideShowCtrl = function($scope, $location, $timeout){
$scope.slideShow = function(){
if($location.url() == '/' || $location.url() == '/home'){
$scope.slideShowView = true;
return true;
}else{
$scope.slideShowView = false;
return false;
}
// I just putting slideshow initial right after $scope.slideShow() return true.
// To make sure slideshow got initial after the ng-show condition return true.
$scope.$watch(function () {
return $scope.slideShow();
}, function (isShow) {
// This $timeout to 100% sure slideshow initial only happen after view got all its base content rendered
$timeout(function () {
if(isShow){
var cs = $('.camera_wrap');
if(cs.length){
cs.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
}
}
}, 0)
})
}
}
<强> P.S。强>
请注意,因为我们没有任何fiddle/plunker
所以为了确保解决方案有效,我应用了一些技巧,这些技巧将为我提供工作代码的答案提供最高的可能性。您可以尝试删除$timeout
以查看其是否有效
答案 1 :(得分:1)
我认为为幻灯片创建指令可以解决这个问题。
我遇到了swiper滑块这类问题。创建指令后解决我的问题。
你的指令
angular.module('app', [])
.directive('cameraSlider', function($timeout){
return {
restrict: 'AC',
templateUrl: function(element, attrs) {
return attrs.templateUrl | 'your_remplate_url.html';
}
link: function($scope, element, attrs){
$timeout(function(){
element.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
element.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
element.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
},200)
}
};
})
现在你可以使用camera-slider
类和相机包装类