在ng-view中使用jssor滑块时，无法设置null属性的角度错误 [英] cannot set property of null Error in angular while using a jssor slider in ng-view
问题描述
我正在尝试使用jssor滑块 我已经在index.html的ng-view中下载了(第三方滑块)，但是当我的页面通过ngRoute注入到ng-view时，它给我错误
I am trying to use a jssor slider which i have downloaded (third party slider) in ng-view of my index.html but when the my page is injected through ngRoute to my ng-view it gives me error
未捕获的TypeError:无法读取未定义的属性'currentStyle' 但是，当我在我的index.html中使用该滑块时，它的效果很好，因为我将其从index.html移至home.html滑块时不起作用. 请解释一下什么是问题 这是我的示例代码: index.html
Uncaught TypeError: Cannot read property 'currentStyle' of undefined but when i use that slider into my index.html it works great, as i move it from index.html to home.html slider not work. plz explain me what is problem here is my sample code: index.html
<!DOCTYPE html>
<html ng-app="MySc">
<head>
<title>MySc</title>
<meta name="viewport"
content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/imports/jquery-1.7.2.min.js"></script>
<script src="js/imports/angular.min.js"></script>
<script src="js/imports/angular-route.js"></script>
<script src="js/imports/angular-touch.min.js"></script>
<script type="text/javascript" src="js/imports/jssor.slider.mini.js"></script>
<link href="styles/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/styles.css">
</head>
<body ng-controller="mainController as main">
<div>
<div ng-view id="changeDiv"></div>
</div>
<script src="js/main.js"></script>
<script src="js/slider.js"></script>
</body>
</html>
home.html
home.html
<div id="mainContainer">
<div class="sliderContainer">
<div style="min-height: 50px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<!-- ================================================== -->
<div id="slider1_container">
<!-- Loading Screen -->
<div u="loading" id="loading">
<div id="innerLoading">
</div>
</div>
<!-- Slides Container -->
<div id="slidesImage" u="slides">
<div >
<img ng-repeat="slide in slides" u="image" ng-src="{{slide.image}}" />
</div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- bullet navigator container -->
<div id="navigator" u="navigator" class="jssorb21">
<!-- bullet navigator item prototype -->
<div id="prototype" u="prototype" style="POSITION: absolute; WIDTH: 19px;HEIGHT: 19px; text-align:center;line-height:19px; color:White; font-size:12px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
<!-- Arrow Navigator Skin Begin -->
<style>
</style>
<!-- Arrow Left -->
<span id="arrowleft" u="arrowleft" class="jssora21l">
</span>
<!-- Arrow Right -->
<span id="arrowright" u="arrowright" class="jssora21r">
</span>
<!-- Arrow Navigator Skin End -->
</div>
<!-- Jssor Slider End -->
</div>
main.js
(function(){
var mysc= angular.module("MySc", ['ngRoute','ngTouch']);
mysc.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl : 'templates/home.html'
}).otherwise({
redirectTo : '/home'
});
} ]);
mysc.controller('mainController',function($scope){
$scope.slides=[
{image:'images/blue.jpg'},
{image:'images/purple.jpg'},
{image:'images/red.jpg'}
];
});
})();
推荐答案
不确定确切的问题是什么.
Not sure what's the exact problem.
请替换
<script type="text/javascript" src="js/imports/jssor.slider.mini.js"></script>
使用
<script type="text/javascript" src="js/imports/jssor.js"></script>
<script type="text/javascript" src="js/imports/jssor.slider.js"></script>
进行调试.
这篇关于在ng-view中使用jssor滑块时，无法设置null属性的角度错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
