JQuery Owl-Carousel funktioniert nicht in angularJS

Question

Ich migriere derzeit jQuery-basierte Website-Vorlage zu AngularJS. Im Skript Javascript hatte ich $ und jQuery benutzt, um ownCarousel zu implementieren. Das Skript und das Front-End-HTML funktionieren in normalem HTML gut. Aber wenn es um AngularJS geht, habe ich die script.js in index.html eingefügt und HTML-Elemente in meine HTML-Ansicht kopiert. Das owlCarousel zeigt nichts, keinen Fehler. Sieht so aus, als ob script.js nicht mehr funktioniert. Möglicherweise möchten Sie die vollständige Version von script.js unter here suchen.

Script

if (jQuery("#testimonials-slider").length) { 
       jQuery("#testimonials-slider").owlCarousel({ 
        singleItem : true, 
        autoHeight : true, 
        mouseDrag: false, 
        transitionStyle : "fade" 
       }); 
      } 

HTML

<div class="col-sm-12" data-animation-direction="from-top" data-animation-delay="50"> 
      <h2 class="section-title">Testimonials</h2> 

      <div id="testimonials-slider" class="owl-carousel testimonials"> 
       <div class="item"> 
        <blockquote class="text"> 
         <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Pellentesque elementum libero enim, eget gravida nunc laoreet et. Nullam ac enim auctor, fringilla risus at, imperdiet turpis.</p> 
        </blockquote> 
        <div class="col-md-5 center"> 
         <div class="author"> 
          <img src="http://placehold.it/61x61" alt="" /> 
          <div> 
           Mark Maecenas<br> 
           <span>CEO at Lorem Ipsum Agency</span> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="item"> 
        <blockquote class="text"> 
         <p>Pellentesque elementum libero enim, eget gravida nunc laoreet et. Nullam ac enim auctor, fringilla risus at, imperdiet turpis.</p> 
        </blockquote> 
        <div class="col-md-5 center"> 
         <div class="author"> 
          <img src="http://placehold.it/61x61" alt="" /> 
          <div> 
           John Doe<br> 
           <span>CTO at Dolor Sit Amet Agency</span> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="item"> 
        <blockquote class="text"> 
         <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Pellentesque elementum libero enim, eget gravida nunc laoreet et. Nullam ac enim auctor, fringilla risus at, imperdiet turpis. Nullam ac enim auctor, fringilla risus at, imperdiet turpis.</p> 
        </blockquote> 
        <div class="col-md-5 center"> 
         <div class="author"> 
          <img src="http://placehold.it/61x61" alt="" /> 
          <div> 
           Mary Smith<br> 
           <span>UFO at Some Agency</span> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

Erwartetes Ergebnis

Problem

OwnCarousel funktioniert gut in normalem HTML, zeigt aber nichts, wenn es um AngularJS geht.

Answer 1

Wie ich weiß, sollten Sie es in Winkel Art und Weise tun und Ihren Code in Ihre benutzerdefinierten Richtlinie wickeln. https://docs.angularjs.org/guide/directive