Сова Карусель не работает в angularjs частичный вид

Question

Сова Карусель не работает в angularjs частичный вид

0

Я новичок в одностраничном приложении AngularJs. Мой Index.html выглядит примерно так:

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <script type="text/javascript">
        //<![CDATA[
        try {
            if (!window.CloudFlare) {
                var CloudFlare = [{ verbose: 0, p: 0, byc: 0, owlid: "cf", bag2: 1, mirage2: 0, oracle: 0, paths: { cloudflare: "/cdn-cgi/nexp/dok3v=1613a3a185/" }, atok: "2b55dd8c7c971ab3d718db0d970118f3", petok: "d2738f68916396140e27f216b4dbe11ae7687d05-1435074757-1800", zone: "templatecycle.com", rocket: "0", apps: {} }];
                CloudFlare.push({ "apps": { "ape": "130be1e7f8d852544c2ef22b01b98e71" } });
                !function (a, b) { a = document.createElement("script"), b = document.getElementsByTagName("script")[0], a.async = !0, a.src = "//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=7e13c32551/cloudflare.min.js", b.parentNode.insertBefore(a, b) }()
            }
        } catch (e) {
        };
        //]]>
    </script>
     <script>
        paceOptions = {
            elements: true
        };
    </script>
</head>
<body>
        <div data-ng-view></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>

</body>
</html>

На этой странице index.html я загружаю частичный вид anguluarjs:

page1.html:

<div class="inner-box relative">
                    <h2 class="title-2">
                        Featured Listings
                        <a id="nextItem" class="link  pull-right carousel-nav"> <i class="icon-right-open-big"></i></a>
                        <a id="prevItem" class="link pull-right carousel-nav"> <i class="icon-left-open-big"></i> </a>
                    </h2>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="no-margin item-carousel owl-carousel owl-theme">
                                <div class="item">
                                    <a href="ads-details.html">
                                        <span class="item-carousel-thumb">
                                            <img class="img-responsive" src="../../images/item/tp/Image00011.jpg" alt="img">
                                        </span>
                                        <span class="item-name"> Lorem ipsum dolor sit amet </span>
                                        <span class="price"> $ 260 </span>
                                    </a>
                                </div>
                                <div class="item">
                                    <a href="ads-details.html">
                                        <span class="item-carousel-thumb">
                                            <img class="item-img" src="../../images/item/tp/Image00006.jpg" alt="img">
                                        </span>
                                        <span class="item-name"> consectetuer adipiscing elit </span>
                                        <span class="price"> $ 240 </span>
                                    </a>
                                </div>
                      </div>
                        </div>
                    </div>
                </div>

Вне внешнего вида (обычный HTML), он работает нормально,

но внутри частичного представления, Он выглядит следующим образом:

Можете ли вы, пожалуйста, направить меня, какая важная вещь, мне здесь не хватает?

Usman Khalid 01 июль 2015, в 21:34

Источник

Теги:

jquery

html

angularjs

single-page-application

owl-carousel

2 ответа

0

Директива:

/* global angular */
(function() {
    'use strict';

    angular.module('<name>').directive('<nAme>', nxCarousel);

    function nxCarousel() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                coll: '=',
                baseUrl: '@',
                imgUrl: '@'
            },
            templateUrl: 'nx-carousel.html',
            link: function(scope, element, attrs) {
                var cntNgRepeat = 2;
                var current = 0;

                scope.$on('ngRepeatFinished', function() {
                    current++;
                    if (current < cntNgRepeat) {
                        return;
                    }
                    current = 0;

                    element.carousel({
                        interval: 4000
                    });

                    var clickEvent = false;
                    element.on('click', '.nav a', function() {
                        clickEvent = true;
                        element.find('.nav li').removeClass('active');
                        $(this).parent().addClass('active');
                    });
                    element.on('slid.bs.carousel', function(e) {
                        if (!clickEvent) {
                            var count = element.find('.nav').children().length - 1;
                            var current = element.find('.nav li.active');
                            current.removeClass('active').next().addClass('active');
                            var id = parseInt(current.data('slide-to'));
                            if (count == id) {
                                element.find('.nav li').first().addClass('active');
                            }
                        }
                        clickEvent = false;
                    });
                });
            }
        };
    }
})();

Шаблон:

<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item" ng-repeat="item in coll" ng-class="{active: $index==0}" nx-on-finish-render="ngRepeatFinished">
            <a href="{{baseUrl}}{{item.slug}}" class="column-post-img">
                <img ng-src="{{imgUrl}}{{item.image}}" class="img-responsive post-img" alt="{{item.title}}" ng-if="item.image">
                <img src="/imgs/950X350.jpg" class="img-responsive post-img" alt="{{item.title}}" ng-if="!item.image">
                <div class="carousel-caption">
                    <h3>{{item.title | limitTo:100}}</h3>
                    <p>{{item.summary | limitTo: 100}}</p>
                </div>
            </a>
        </div>
    </div>
    <ul class="nav carousel nav-pills nav-justified">
        <li data-target="#carousel" data-slide-to="{{$index}}" ng-repeat="item in coll" ng-class="{active: $index==0}" nx-on-finish-render="ngRepeatFinished"><a data-target="#">{{item.title | limitTo:100}}</a></li>
    </ul>
</div>

Garistar 02 июль 2015, в 03:54

0

Это не работает
Usman Khalid 02 июль 2015, в 16:08
0

Можете ли вы объяснить свой код немного, чтобы я мог изменить его сам?
Usman Khalid 02 июль 2015, в 16:38

Ещё вопросы

Можете ли вы объяснить свой код немного, чтобы я мог изменить его сам?

Usman Khalid · Accepted Answer · 2015-07-02T17-05-00.000Z

Наконец, он начал работать, создав directive:

Вот директива:

app.directive('wrapOwlcarousel', function () {

    var link = function (scope, element, attr) {

        // Loads owl carousel with default settings, unless otherwise requested in parameters
        var carousel = function () {
            element.owlCarousel({
                // Most important owl features
                items: attr.owlItems ? attr.owlItems : 5,
                itemsCustom: attr.owlItemscustom ? (attr.owlItemscustom.toLowerCase() == 'true') : false,
                itemsDesktop: [1199, attr.owlItemsdesktop ? attr.owlItemsdesktop : 4],
                itemsDesktopSmall: [980, attr.owlItemsdesktopsmall ? attr.owlItemsdesktopsmall : 3],
                itemsTablet: [768, attr.owlItemstablet ? attr.owlItemstablet : 2],
                itemsTabletSmall: attr.owlItemstabletsmall ? (attr.owlItemstabletsmall.toLowerCase() == 'true') : false,
                itemsMobile: [479, attr.owlItemsmobile ? attr.owlItemsmobile : 1],
                singleItem: attr.owlSingleitem ? (attr.owlSingleitem.toLowerCase() == 'true') : false,
                itemsScaleUp: attr.owlItemsscaleup ? (attr.owlItemsscaleup.toLowerCase() == 'true') : false,

                //Basic Speeds
                slideSpeed: attr.owlSlidespeed ? attr.owlSlidespeed : 200,
                paginationSpeed: attr.owlPaginationspeed ? attr.owlPaginationspeed : 800,
                rewindSpeed: attr.owlRewindspeed ? attr.owlRewindspeed : 1000,

                //Autoplay
                autoPlay: attr.owlAutoplay ? (attr.owlAutoplay.toLowerCase() == 'true') : false,
                stopOnHover: attr.owlStoponhover ? (attr.owlStoponhover.toLowerCase() == 'true') : false,

                // Navigation
                navigation: attr.owlNavigation ? (attr.owlNavigation.toLowerCase() == 'true') : false,
                navigationText: [attr.owlNavigationtextprev ? attr.owlNavigationtextprev : "prev",
                        attr.owlNavigationtextnext ? attr.owlNavigationtextnext : "next"],
                rewindNav: attr.owlRewindnav ? (attr.owlRewindnav.toLowerCase() == 'true') : true,
                scrollPerPage: attr.owlScrollperpage ? (attr.owlScrollperpage.toLowerCase() == 'true') : false,

                //Pagination
                pagination: attr.owlPagination ? (attr.owlPagination.toLowerCase() == 'true') : true,
                paginationNumbers: attr.owlPaginationnumbers ? (attr.owlPaginationnumbers.toLowerCase() == 'true') : false,

                // Responsive
                responsive: attr.owlResponsive ? (attr.owlResponsive.toLowerCase() == 'true') : true,
                responsiverefreshrate: attr.owlResponsiverefreshrate ? attr.owlResponsiverefreshrate : 200,
                responsivebasewidth: attr.owlResponsivebasewidth ? attr.owlResponsivebasewidth : window,

                // CSS Styles
                baseClass: attr.owlBaseclass ? attr.owlBaseclass : "owl-carousel",
                theme: attr.owlTheme ? attr.owlTheme : "owl-theme",

                //Lazy load
                lazyLoad: attr.owlLazyload ? (attr.owlLazyload.toLowerCase() == 'true') : false,
                lazyFollow: attr.owlLazyfollow ? (attr.owlLazyfollow.toLowerCase() == 'true') : true,
                lazyEffect: attr.owlLazyeffect ? attr.owlLazyeffect : "fade",

                //Auto height
                autoHeight: attr.owlAutoheight ? (attr.owlAutoheight.toLowerCase() == 'true') : false,

                //JSON
                jsonPath: attr.owlJsonpath ? (attr.owlJsonpath.toLowerCase() == 'true') : false,
                jsonSuccess: attr.owlJsonsuccess ? (attr.owlJsonsuccess.toLowerCase() == 'true') : false,

                //Mouse Events
                dragBeforeAnimFinish: attr.owlDragbeforeanimfinish ? (attr.owlDragbeforeanimfinish.toLowerCase() == 'true') : true,
                mouseDrag: attr.owlMousedrag ? (attr.owlMousedrag.toLowerCase() == 'true') : true,
                touchDrag: attr.owlTouchdrag ? (attr.owlTouchdrag.toLowerCase() == 'true') : true,

                //Transitions
                transitionStyle: attr.owlTransitionstyle ? (attr.owlTransitionstyle.toLowerCase() == 'true') : false,

                // Other
                addClassActive: attr.owlAddclassactive ? (attr.owlAddclassactive.toLowerCase() == 'true') : false,

                //Callbacks
                beforeUpdate: attr.owlBeforeupdate ? (attr.owlBeforeupdate.toLowerCase() == 'true') : false,
                afterUpdate: attr.owlAfterupdate ? (attr.owlAfterupdate.toLowerCase() == 'true') : false,
                beforeInit: attr.owlBeforeinit ? (attr.owlBeforeinit.toLowerCase() == 'true') : false,
                afterInit: attr.owlAfterinit ? (attr.owlAfterinit.toLowerCase() == 'true') : false,
                beforeMove: attr.owlBeforemove ? (attr.owlBeforemove.toLowerCase() == 'true') : false,
                afterMove: attr.owlAftermove ? (attr.owlAftermove.toLowerCase() == 'true') : false,
                afterAction: attr.owlAfteraction ? (attr.owlAfteraction.toLowerCase() == 'true') : false,
                startDragging: attr.owlStartdragging ? (attr.owlStartdragging.toLowerCase() == 'true') : false,
                afterLazyLoad: attr.owlAfterlazyload ? (attr.owlAfterlazyload.toLowerCase() == 'true') : false
            });
        }

        // Use carousel id to bind control buttons to specific carousel (Multiple carousel support)
        // Otherwise, use owl-carousel as default.
        // Any element with given class will trigger control on click.
        //  '.owlcarousel-next' - Scrolls left
        //  '.owlcarousel-prev' - Scrolls right
        //  '.owlcarousel-play' - Starts autoplay
        //  '.owlcarousel-stop' = Stops autoplay
        var uniqueId = attr.id ? attr.id : 'owl-carousel';
        var actions = function () {
            angular.element("#nextItem").click(function () {
                element.trigger('owl.next');
            })
            angular.element("#prevItem").click(function () {
                element.trigger('owl.prev');
            })

        }

        // Watch items in carousel to reload when items are added/removed.
        scope.$watch(uniqueId + "-items", function (value) {
            carousel(element);
        })

        // Load the triggers for carousel controls.
        actions();
    }

    return {
        restrict: 'E',
        link: link
    }

});

Код HTML:

<div class="inner-box relative">
                    <h2 class="title-2">
                        Featured Listings
                        <a id="nextItem" class="link  pull-right carousel-nav"> <i class="icon-right-open-big"></i></a>
                        <a id="prevItem" class="link pull-right carousel-nav"> <i class="icon-left-open-big"></i> </a>
                    </h2>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="no-margin item-carousel owl-carousel owl-theme">
                                <wrap-owlcarousel class="owl-carousel"
                                                  data-options="{autoPlay: 5000, stopOnHover: true, slideSpeed : 300, paginationSpeed : 400}">
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb">
                                                <img class="img-responsive" src="../images/item/tp/Image00011.jpg" alt="img">
                                            </span>
                                            <span class="item-name"> Lorem ipsum dolor sit amet </span>
                                            <span class="price"> $ 260 </span>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb"> <img class="item-img" src="../../images/item/tp/Image00013.jpg" alt="img"> </span><span class="item-name"> feugiat nulla facilisis </span> <span class="price"> $ 140 </span>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb"> <img class="item-img" src="../../images/item/FreeGreatPicture.com-46404-google-drops-nexus-4-by-100-offers-15-day-price-protection-refund.jpg" alt="img"> </span> <span class="item-name"> praesent luptatum zzril </span> <span class="price"> $ 220 </span>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb"> <img class="item-img" src="../../images/item/FreeGreatPicture.com-46405-google-drops-price-of-nexus-4-smartphone.jpg" alt="img"> </span> <span class="item-name"> delenit augue duis dolore </span> <span class="price"> $ 120 </span>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb"> <img class="item-img" src="../../images/item/FreeGreatPicture.com-46407-nexus-4-starts-at-199.jpg" alt="img"> </span> <span class="item-name"> te feugait nulla facilisi </span> <span class="price"> $ 251 </span>
                                        </a>
                                    </div>
                                </wrap-owlcarousel>
                            </div>
                        </div>
                    </div>
                </div>