I`ve got an error while using jssor slider with ui-view directive
It works good without angularjs
Uncaught TypeError: Cannot read property 'currentStyle' of undefined"
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 already seen the similar question here cannot set property of null Error in angular while using a jssor slider in ng-view and tried to fix my issue using this and other suggestions but nothing has been helpful
Will really appreciate your help
Generally when you are performing DOM manipulation, you will want to use directive's link function. This will allow you to ensure that all of the HTML has compiled and is ready before you attempt to modify it.
.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);
});
}
};
}]);
Usage
<jssor-slider></jssor-slider>