在 angularjs 中使用带有 ui-view 的 jssor 滑块时出错

Question

我在将 jssor 滑块与 ui-view 指令一起使用时出现错误

没有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 已经在此处看到类似的问题 cannot set property of null Error in angular while using a jssor slider in ng-view 并尝试使用此建议和其他建议解决我的问题，但没有任何帮助

非常感谢您的帮助

Answer 1

通常当您执行 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 的 jssor 滑块时出错

got an error using jssor slider in angularjs with ui-view

javascript

jquery

uiview

angularjs

jssor