JQuery Owl-Carousel不在angularJS工作

Question

我目前正在将基于jQuery的网站模板迁移到AngularJS。在脚本javascript中，我使用了$和jQuery来实现ownCarousel。脚本和前端HTML在普通HTML中运行良好。但是当涉及到AngularJS时，我将script.js包含在index.html中，并将html元素复制到自己的视图HTML中。owlCarousel没有显示任何错误，也没有任何错误。看来script.js停止工作了。您可能希望在script.js的这里上查看完整的版本。

脚本

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

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

预期结果

​

问题

OwnCarousel在普通的HTML中工作得很好，但是当涉及到AngularJS时没有显示任何错误。

​

​

Answer 1

正如我所知道的，您应该以角度的方式完成它，并将您的代码包装到您的自定义指令中。https://docs.angularjs.org/guide/directive