cannot set property of null Error in angular while using a jssor slider in 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

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

<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'}
      ];
  });
})();

回答1:

Not sure what's the exact problem.

Please replace

<script type="text/javascript" src="js/imports/jssor.slider.mini.js"></script>

with

<script type="text/javascript" src="js/imports/jssor.js"></script>
<script type="text/javascript" src="js/imports/jssor.slider.js"></script>

to debug.

来源：https://stackoverflow.com/questions/29146728/cannot-set-property-of-null-error-in-angular-while-using-a-jssor-slider-in-ng-vi

标签

javascript

angularjs

jssor

ngroute

ng-view