jqueryhtmlangularjssingle-page-applicationowl-carousel
owl carousel not working in angularjs partial view
I am new to AngularJs single page application. My Index.html is something like this:
<!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>
In this index.html page, I am loading anguluarjs partial view:
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>
Outside of partail view (normal HTML), it is working fine,
but inside the partial view, It is appearing like below:
Can you please guide me, what important thing, I am missing here?
Solution
Finally got it working by creating a directive:
Here is the 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's 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 code:
<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>
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices