bekam einen Fehler jssor Schieber in AngularJS mit ui-Ansicht mit

`ve einen Fehler bekam während jssor Slider mit ui-Ansicht Richtliniebekam einen Fehler jssor Schieber in AngularJS mit ui-Ansicht mit

mit Es funktioniert gut, ohne 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 bereits die ähnliche Frage hier cannot set property of null Error in angular while using a jssor slider in ng-view gesehen und versucht, mein Problem mit diesem und anderen Vorschläge zu beheben, aber nichts hilfreich gewesen

schätzen Ihre Hilfe wirklich

Quelle

2016-05-06 Maryna Salii

Wenn Sie eine DOM-Manipulation durchführen, sollten Sie in der Regel die Funktion link der Direktive verwenden. Dadurch können Sie sicherstellen, dass der gesamte HTML-Code kompiliert und bereit ist, bevor Sie versuchen, ihn zu ändern.

.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); 
       }); 

      } 
     }; 
    }]);

Nutzungs

<jssor-slider></jssor-slider>

Quelle

2016-05-06 23:22:53 SuperVeetz

danke! es hat mein Problem gelöst) –

bekam einen Fehler jssor Schieber in AngularJS mit ui-Ansicht mit

Antwort

Verwandte Themen