jQuery的滑块不与角工作

Question

I have my html like this:

<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 -->

I am using the following script to load the sliding animation:

 /***************** 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

I am using this feature from: https://revolution.themepunch.com/jquery/

The problem is it was working fine with normal html/css/jquery but when I converted my app to angular then the animation isn't showing up and also the text <h2 class="slide-title">We Help You Learn What You Love</h2> is not visible at all. The image is just blank on the landing page. Why is this happening? I don't see any console errors also.

Here's the link: http://rootscopeit.in/

Answer 1

Generally, when I need angular to work with another library, I wrap the commands of the secondary library (JQuery) inside of an AngularJS service. Then, add the service to the controller and call the function from the 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();
  }
})();