猫头鹰轮播无法在angularjs局部视图中工作
问题描述 投票：0回答：3
我是AngularJ单页应用程序的新手。我的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>
在partail视图之外（正常HTML），它工作正常，
但在局部视图中，如下所示：
您能指导我，什么重要的事情，我在这里想念吗？
3个回答
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>
0
投票
投票
最后通过创建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代码：
<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>
0
投票
投票
我遇到了相同的问题，该指令似乎无法解决我的问题。.请您帮忙。
最新问题
- Buildozer 认为找不到文件，即使有一个文件
- R 可根据条件向列添加前缀
- 在现有图像上显示圆圈的问题
- 我将我的 javascript 客户端迁移到另一个域，现在对 php api 的跨站点调用不共享相同的 php 会话
- QGIS 表达式生成器使用什么语言？
- 如何避免重复反应式代码？
- Python 在退出前运行 bash 脚本
- 如何制作此类卡片组件
- 将 C++ 嵌套类分离到它们自己的头文件中
- 以特殊格式从 JAR 中提取类名
- 如何“修复‘asm’中未知的寄存器名称‘%xmm1’”？
- Excel Countifs 以及对表列的结构化引用
- 用户 phpseclib0.3.1 - sftp get - 当我将本地文件留空时，我没有获得正确的文件内容
- psycopg2.extras.execute_values 插入多行几何数据
- Oracle/SQL PLUS：如何假脱机日志并在整个脚本中间歇性写入
- 使用 OdiSqlUnload 为 csv 文件生成标头
- android TUS上传文件到服务器
- 如何使用 Pandera 验证嵌套的 Spark DataFrame？
- 从 postgres 中的大表中删除大列
- 具有形状绘制和编辑功能的自定义图片框
© www.soinside.com 2019 - 2024. All rights reserved.