无法通过ng-include和jquery将html文件包含在其他文件中

时间：2015-09-24 20:47:48

标签： jquery html angularjs twitter-bootstrap

我正在尝试通过ng-include在另一个文件 prodDetail.html 中包含 ProdDetailCarousel.html 文件。内容已加载但页面的脚本不起作用。有人可以帮忙吗？

prodDetail.html 

    <div class="row">
        <div class="col-sm-6 col-md-4 "><p >Box 1 <ng-include src="'ProdDetailCarousel.html'"></ng-include></p></div>
        <div class="col-sm-6 col-md-4 "><p>Box 2</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 "><p>Box 3</p></div>
    </div>

ProdDetailCarousel.html 

    <link rel="stylesheet" href="../../bower_components/owlcarousel/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="../../bower_components/owlcarousel/owl-carousel/owl.theme.css">
    <script src="../../bower_components/owlcarousel/owl-carousel/owl.carousel.js"></script>
<body>
<div class="title">
    <span>bliss arts</span>
</div>
<div id="sync1" style="width:300px; height:300px" class="owl-carousel">
    <div class="item"><img src="img/bg.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/2.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/3.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/4.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/bg.png" style="max-width:100%; max-height:100%"></div>

</div>
<div id="sync2" style="height:300px;width:300px " class="owl-carousel">
    <div class="item"><img src="img/bg.png" width="60" height="51"></div>
    <div  class="item"><img src="img/2.png" style="max-width:100%; max-height:100%"></div>
    <div  class="item"><img src="img/3.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/4.png" style="max-width:100%; max-height:100%"></div>
    <div  class="item"><img src="img/bg.png" style="max-width:100%; max-height:100%"></div>

</div>

<script>


   $(document).ready(function() {

       var sync1 = $("#sync1");
       var sync2 = $("#sync2");

       sync1.owlCarousel({
           singleItem : true,
           slideSpeed : 50,
           navigation: true,
           pagination:false,
           lazyLoad : true,
           afterAction : syncPosition,
           responsiveRefreshRate : 200,
       });

       sync2.owlCarousel({
           items : 5,
           itemsDesktop      : [1199,5],
           itemsDesktopSmall     : [979,5],
           itemsTablet       : [768,5],
           itemsMobile       : [479,5],
           pagination:false,
           responsiveRefreshRate : 100,
           afterInit : function(el){
               el.find(".owl-item").eq(0).addClass("synced");
           }
       });

       function syncPosition(el){
           var current = this.currentItem;
           $("#sync2")
                   .find(".owl-item")
                   .removeClass("synced")
                   .eq(current)
                   .addClass("synced")
           if($("#sync2").data("owlCarousel") !== undefined){
               center(current)
           }
       }

       $("#sync2").on("click", ".owl-item", function(e){
           e.preventDefault();
           var number = $(this).data("owlItem");
           sync1.trigger("owl.goTo",number);
       });

       function center(number){
           var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
           var num = number;
           var found = false;
           for(var i in sync2visible){
               if(num === sync2visible[i]){
                   var found = true;
               }
           }

           if(found===false){
               if(num>sync2visible[sync2visible.length-1]){
                   sync2.trigger("owl.goTo", num - sync2visible.length+2)
               }else{
                   if(num - 1 === -1){
                       num = 0;
                   }
                   sync2.trigger("owl.goTo", num);
               }
           } else if(num === sync2visible[sync2visible.length-1]){
               sync2.trigger("owl.goTo", sync2visible[1])
           } else if(num === sync2visible[0]){
               sync2.trigger("owl.goTo", num-1)
           }

       }

   });

</script>

</body>

我能够看到图像，但无法实现在javascript中实现的CAROUSEL。请注意， ProdDetailCarousel.html 可以正常使用。

1 个答案:

答案 0 :(得分：2)

ng-include没有执行脚本标记中的内容。您可以在其周围放置一个指令，并使用postLink方法将owlCarousel连接到指令元素。此外，模板顶部的css link标记和script标记也无法使用。您必须在容器视图中添加这些外角，您还可以在其中加载角度脚本。另外，请不要忘记在我的示例中更改myApp以获取应用名称。有关指令的更多信息，我建议您使用本指南：https://docs.angularjs.org/guide/directive。

这将是你的指示：

angular.module('myApp').directive('carousel', function() {

    return {
        templateUrl: 'ProdDetailCarousel.html',
        link: function postLink(scope, element, attrs) {
            var sync1 = element.find("#sync1");
           var sync2 = element.find("#sync2");

           sync1.owlCarousel({
               singleItem : true,
               slideSpeed : 50,
               navigation: true,
               pagination:false,
               lazyLoad : true,
               afterAction : syncPosition,
               responsiveRefreshRate : 200,
           });

           sync2.owlCarousel({
               items : 5,
               itemsDesktop      : [1199,5],
               itemsDesktopSmall     : [979,5],
               itemsTablet       : [768,5],
               itemsMobile       : [479,5],
               pagination:false,
               responsiveRefreshRate : 100,
               afterInit : function(el){
                   el.find(".owl-item").eq(0).addClass("synced");
               }
           });

           function syncPosition(el){
               var current = this.currentItem;
               $("#sync2")
                       .find(".owl-item")
                       .removeClass("synced")
                       .eq(current)
                       .addClass("synced")
               if($("#sync2").data("owlCarousel") !== undefined){
                   center(current)
               }
           }

           $("#sync2").on("click", ".owl-item", function(e){
               e.preventDefault();
               var number = $(this).data("owlItem");
               sync1.trigger("owl.goTo",number);
           });

           function center(number){
               var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
               var num = number;
               var found = false;
               for(var i in sync2visible){
                   if(num === sync2visible[i]){
                       var found = true;
                   }
               }

               if(found===false){
                   if(num>sync2visible[sync2visible.length-1]){
                       sync2.trigger("owl.goTo", num - sync2visible.length+2)
                   }else{
                       if(num - 1 === -1){
                           num = 0;
                       }
                       sync2.trigger("owl.goTo", num);
                   }
               } else if(num === sync2visible[sync2visible.length-1]){
                   sync2.trigger("owl.goTo", sync2visible[1])
               } else if(num === sync2visible[0]){
                   sync2.trigger("owl.goTo", num-1)
               }

           }
        }
    };

});

这将是您的 prodDetail.html 模板：

<div class="row">
    <div class="col-sm-6 col-md-4 "><p >Box 1 <carousel></carousel></p></div>
    <div class="col-sm-6 col-md-4 "><p>Box 2</p></div>
    <div class="clearfix visible-sm-block"></div>
    <div class="col-sm-6 col-md-4 "><p>Box 3</p></div>
</div>

这将是您的 ProdDetailCarousel.html 模板：

<div class="title">
    <span>bliss arts</span>
</div>
<div id="sync1" style="width:300px; height:300px" class="owl-carousel">
    <div class="item"><img src="img/bg.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/2.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/3.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/4.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/bg.png" style="max-width:100%; max-height:100%"></div>

</div>
<div id="sync2" style="height:300px;width:300px " class="owl-carousel">
    <div class="item"><img src="img/bg.png" width="60" height="51"></div>
    <div  class="item"><img src="img/2.png" style="max-width:100%; max-height:100%"></div>
    <div  class="item"><img src="img/3.png" style="max-width:100%; max-height:100%"></div>
    <div class="item"><img src="img/4.png" style="max-width:100%; max-height:100%"></div>
    <div  class="item"><img src="img/bg.png" style="max-width:100%; max-height:100%"></div>

</div>
相关问题
最新问题