Javascript 将JQuery owl转盘与Angular单页应用程序相结合_Javascript_Jquery_Html_Angularjs

Javascript 将JQuery owl转盘与Angular单页应用程序相结合

javascript jquery html angularjs

Javascript 将JQuery owl转盘与Angular单页应用程序相结合,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我希望在angular js单页应用程序中有一个JQuery owl旋转木马对象这是angular中的代码： index.html： <!DOCTYPE html> <html> <title>Small Talkz</title> <head> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angula

我希望在angular js单页应用程序中有一个JQuery owl旋转木马对象

这是angular中的代码：

index.html：

 <!DOCTYPE html>
 <html>
 <title>Small Talkz</title>
 <head>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="small-talkz.model.js"></script>
    <script src="components/chat/chatController.js"></script>
    <script src="components/login/loginController.js"></script>
    <script src="../assets/js/owl.carousel.js"></script>
    <link rel="stylesheet" href="../assets/css/jumbotron.css">
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/owl.carousel.css">
    <link rel="stylesheet" href="../assets/css/owl.theme.css">

 </head>
 <body>
    <div ng-app="smallTalkzModel" class="loader">
        <div ui-view>
        </div>
    </div>
 </body>
 </html>

这是carouselView.html

<body>
<div id="carousel_demo">
    <div id="owl-example" class="owl-carousel">
      <div> Content1 </div>
      <div> Content2 </div>
      <div> Content3 </div>
    </div>
</div>
</body>

但是当我进入页面（localhost:3000/#/carousel）时，我什么也看不到

我甚至没有在chrome开发者的工具控制台（F12）上得到一个错误

我认为JQuery$（document）.ready（..）和角度引导的组合有问题，但我不确定问题出在哪里

请帮我弄清楚。

您需要从angular内部使用jQuery

angular.module("app",[]).controller("ctrl",function($scope){
 $(document).ready(function() {

  $("#owl-example").owlCarousel();
})

用下面的代码解决了这个问题

angular.module("app",[]).controller('owlController', owlController);

function owlController() {
  setTimeout(function(){
    $(#owl-example).owlCarousel({
      items : 3,
      itemsCustom : false,
      itemsDesktop : [1199,2],
      itemsDesktopSmall : [980,2],
      itemsTablet: [768,2],
      itemsTabletSmall: [767,1],
      itemsMobile : [479,1],
      singleItem : false,
      itemsScaleUp : false,
      navigation : true,
      navigationText : ["",""],
      pagination : false
    });
  }, 0);
}

而在模板中呢

<div id="carousel_demo"  ng-controller="owlController">
    <div id="owl-example" class="owl-carousel">
      <div> Content1 </div>
      <div> Content2 </div>
      <div> Content3 </div>
    </div>
</div>


内容1
内容2
内容3

谢谢我这么做了，但现在它只显示了“Content1”、“Content2”、“Content3”，没有owlCarousel行为（纯文本）。我需要把css放在哪里？你应该把css放在头上是正常的，你知道jquery的行为应该是什么吗？否：（你确定可以把jqeury代码（$（document.ready（..）放在头上吗？）内部angular js控制器？在上一个项目中是相同的，我们无法从外部angular执行jquery，但可以从内部执行。我非常确定。@Matoy您可以尝试使用$rootScope。$on（'$includeContentLoaded'，function（）{$（“#owl example”）.owlCarousel（）}）；是我针对owl定向的通用解决方案吗

angular.module("app",[]).controller('owlController', owlController);

function owlController() {
  setTimeout(function(){
    $(#owl-example).owlCarousel({
      items : 3,
      itemsCustom : false,
      itemsDesktop : [1199,2],
      itemsDesktopSmall : [980,2],
      itemsTablet: [768,2],
      itemsTabletSmall: [767,1],
      itemsMobile : [479,1],
      singleItem : false,
      itemsScaleUp : false,
      navigation : true,
      navigationText : ["",""],
      pagination : false
    });
  }, 0);
}

<div id="carousel_demo"  ng-controller="owlController">
    <div id="owl-example" class="owl-carousel">
      <div> Content1 </div>
      <div> Content2 </div>
      <div> Content3 </div>
    </div>
</div>