使用带有ui-view的angularjs中的jssor滑块出错
[英]got an error using jssor slider in angularjs with ui-view
问题描述
使用带有ui-view指令的jssor滑块时出错
没有angularjs它很好用
未捕获的TypeError：无法读取未定义的属性'currentStyle'
的index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="dyplomApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Health is everything</title>
<link href="styles/normalize.css" rel="stylesheet" />
<link href="styles/style.css" rel="stylesheet" />
</head>
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts/jssor.slider.mini.js"></script>
<script type="text/javascript" src="scripts/slider.js"></script>
</body>
</html>
了header.html
<div id="header" ng-controller="MainCtrl">
<div id="slider">
<div id="jssor_1" style="position: relative; margin: 0 auto; top:0; left:0; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<div data-u="loading" style="position: absolute; top:0; left:0;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top:0; left:0; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('images/loading.gif') no-repeat center center;top:0;left:0;width:100%;height:100%;"></div>
</div>
<div id="slides" data-u="slides" style="cursor: default; position: relative; top:0; left:0; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00" style="display: none;">
<img data-u="image" ng-src="images/doctor1.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" ng-src="images/doctor2.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" ng-src="images/doctor3.jpg" />
</div>
</div>
<div data-u="navigator" ng-class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<span data-u="arrowleft" ng-class="jssora22l" style="top:0;left:12px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" ng-class="jssora22r" style="top:0;right:12px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
</div><!--SLIDER-->
</div><!--HEADER-->
slider.js
var jssor_1_SlideoTransitions = [
[{ b: 5500, d: 3000, o: -1, r: 240, e: { r: 2 } }],
[{ b: -1, d: 1, o: -1, c: { x: 51.0, t: -51.0 } }, { b: 0, d: 1000, o: 1, c: { x: -51.0, t: 51.0 }, e: { o: 7, c: { x: 7, t: 7 } } }],
[{ b: -1, d: 1, o: -1, sX: 9, sY: 9 }, { b: 1000, d: 1000, o: 1, sX: -9, sY: -9, e: { sX: 2, sY: 2 } }],
[{ b: -1, d: 1, o: -1, r: -180, sX: 9, sY: 9 }, { b: 2000, d: 1000, o: 1, r: 180, sX: -9, sY: -9, e: { r: 2, sX: 2, sY: 2 } }],
[{ b: -1, d: 1, o: -1 }, { b: 3000, d: 2000, y: 180, o: 1, e: { y: 16 } }],
[{ b: -1, d: 1, o: -1, r: -150 }, { b: 7500, d: 1600, o: 1, r: 150, e: { r: 3 } }],
[{ b: 10000, d: 2000, x: -379, e: { x: 7 } }],
[{ b: 10000, d: 2000, x: -379, e: { x: 7 } }],
[{ b: -1, d: 1, o: -1, r: 288, sX: 9, sY: 9 }, { b: 9100, d: 900, x: -1400, y: -660, o: 1, r: -288, sX: -9, sY: -9, e: { r: 6 } }, { b: 10000, d: 1600, x: -200, o: -1, e: { x: 16 } }]
];
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
PS.Have已经看到类似的问题在这里使用ng-view中的jssor滑块并尝试使用此和其他建议修复我的问题时无法在角度设置null属性null但没有任何帮助
真的很感谢你的帮助
1 个解决方案
解决方案1
0 已采纳 2016-05-06 23:22:53
通常，当您执行DOM操作时，您将需要使用指令的link功能。 这将允许您在尝试修改之前确保所有HTML已编译并准备就绪。
.directive('jssorSlider', [function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'app/directives/templates/jssor-slider.html',
link: function (scope, elem) {
var jssor_1_SlideoTransitions = [
[{ b: 5500, d: 3000, o: -1, r: 240, e: { r: 2 } }],
[{ b: -1, d: 1, o: -1, c: { x: 51.0, t: -51.0 } }, { b: 0, d: 1000, o: 1, c: { x: -51.0, t: 51.0 }, e: { o: 7, c: { x: 7, t: 7 } } }],
[{ b: -1, d: 1, o: -1, sX: 9, sY: 9 }, { b: 1000, d: 1000, o: 1, sX: -9, sY: -9, e: { sX: 2, sY: 2 } }],
[{ b: -1, d: 1, o: -1, r: -180, sX: 9, sY: 9 }, { b: 2000, d: 1000, o: 1, r: 180, sX: -9, sY: -9, e: { r: 2, sX: 2, sY: 2 } }],
[{ b: -1, d: 1, o: -1 }, { b: 3000, d: 2000, y: 180, o: 1, e: { y: 16 } }],
[{ b: -1, d: 1, o: -1, r: -150 }, { b: 7500, d: 1600, o: 1, r: 150, e: { r: 3 } }],
[{ b: 10000, d: 2000, x: -379, e: { x: 7 } }],
[{ b: 10000, d: 2000, x: -379, e: { x: 7 } }],
[{ b: -1, d: 1, o: -1, r: 288, sX: 9, sY: 9 }, { b: 9100, d: 900, x: -1400, y: -660, o: 1, r: -288, sX: -9, sY: -9, e: { r: 6 } }, { b: 10000, d: 1600, x: -200, o: -1, e: { x: 16 } }]
];
var options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
elem.ready(function () {
var jssor_slider1 = new $JssorSlider$('jssor_1', options);
});
}
};
}]);
用法
<jssor-slider></jssor-slider>
Angularjs ui-view 未更新
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.