javascript - Jquery slider 不适用于 Angular

Question

我的 html 是这样的:

<div class="tp-banner">
    <ul>
        <li data-transition="random" data-slotamount="7" data-masterspeed="1500">
            <!-- MAIN IMAGE -->
            <img src="assets/img/content/02-home-slide-item-3-1600x700.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
            <!-- LAYERS -->
            <!-- LAYER NR. 1 -->
            <div class="tp-caption sft skewtoleft tp-resizeme start white"
                 data-y="210"
                 data-x="center"
                 data-hoffset="0"
                 data-start="300"
                 data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                 data-speed="500"
                 data-easing="Power3.easeInOut"
                 data-endspeed="300"
                 style="z-index: 2">
                <h2 class="slide-title">We Help You Learn What You Love</h2>
            </div>
            <!-- LAYER NR. 2 -->
            <div class="tp-caption black randomrotate skewtoleft tp-resizeme start" 
                 data-x="center" 
                 data-hoffset="0" 
                 data-y="240" 
                 data-speed="500" 
                 data-start="1300" 
                 data-easing="Power3.easeInOut" 
                 data-splitin="none" 
                 data-splitout="none" 
                 data-elementdelay="0.1" 
                 data-endelementdelay="0.1" 
                 data-endspeed="500" style="z-index: 99; white-space: pre-line;">
                <p class="slide-description">Lorem Ipsum is simply dummy of the printing and typesetting 's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </li><!-- end 1st slide -->
        <li data-transition="random" data-slotamount="7" data-masterspeed="1000">
            <!-- MAIN IMAGE -->
            <img src="assets/img/content/02-home-slide-item-2-1600x700.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
            <!-- LAYERS -->
            <!-- LAYER NR. 1 -->
            <div class="tp-caption sft skewtoleft tp-resizeme start white"
                 data-y="210"
                 data-x="center"
                 data-hoffset="0"
                 data-start="300"
                 data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                 data-speed="500"
                 data-easing="Power3.easeInOut"
                 data-endspeed="300"
                 style="z-index: 2">
                <h2 class="slide-title">Join RootScope Education now & get our free courses!</h2>
            </div>
            <!-- LAYER NR. 2 -->
            <div class="tp-caption black randomrotate skewtoleft tp-resizeme start" 
                 data-x="center" 
                 data-hoffset="0" 
                 data-y="240" 
                 data-speed="500" 
                 data-start="1300" 
                 data-easing="Power3.easeInOut" 
                 data-splitin="none" 
                 data-splitout="none" 
                 data-elementdelay="0.1" 
                 data-endelementdelay="0.1" 
                 data-endspeed="500" style="z-index: 99; white-space: pre-line;">
                <p class="slide-description">Lorem Ipsum is simply dummy of the printing and typesetting 's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </li><!-- end 2nd slide -->
    </ul><!-- end ul elements -->
</div><!-- end tp-banner -->

我使用以下脚本来加载滑动动画:

 /***************** Slider Revolution ******************/

    $('.tp-banner').revolution({
        delay:9000,
        startheight:616,
        navigationVAlign: "center",
        soloArrowLeftHOffset: 100,
        soloArrowLeftVOffset: 10,
        soloArrowRightHOffset: 100,
        soloArrowRightVOffset: 10,
        hideTimerBar: "on",
        hideArrowsOnMobile:"off",
        hideThumbs:0
    }); // Main Slider

    $('.fullscreen').revolution({
        delay:9000,
        startheight:616,
        navigationVAlign: "center",
        hideTimerBar: "on",
        fullScreen: "on",
        hideThumbs:0
    }); // Fullscreen Slider

我正在使用此功能:https://revolution.themepunch.com/jquery/

问题是它在正常的 html/css/jquery 中工作正常，但是当我将我的应用程序转换为 Angular 时，动画没有显示，文本 <h2 class="slide-title">We Help You Learn What You Love</h2> 也没有显示。根本不可见。着陆页上的图像只是空白。为什么会发生这种情况？我也没有看到任何控制台错误。

链接如下:http://rootscopeit.in/

Answer 1

通常，当我需要 Angular 来使用另一个库时，我会将辅助库 (JQuery) 的命令包装在 AngularJS 服务中。然后，将服务添加到 Controller 并从 Controller 调用该函数。

var app = angular.module("myApp");

(function(){
  'use strict';

  app.service('mySvc', mySvc);

  mySvc.$inject = [];
  function mySvc(){
      var svc = this;
      svc.runJquery = function(){
         //Jquery goes here
      };

      return {runJquery: svc.runJquery}
  }

  app.controller('myCtrl', myCtrl);

  myCtrl.$inject = ["mySvc"];
  function myCtrl(mySvc){
      mySvc.runJquery();
  }
})();