I have integrated Angular carousal in my project it's working fine in all browser except the Safari.
I have taken reference from angular-carousel.
i did in my project
in index.html i have included below files:
<script src="js/carousel/angular-swipe.js"></script>
<script src="js/carousel/angular-carousel.js"></script>
<script src="client/html/carouselController.js"></script>
<div class="row" ng-controller="DemoCtrl">
<div class="col-sm-12">
<ul class="my-slider" rn-carousel rn-carousel-buffered rn-carousel-indicator rn-carousel-control>
<li ng-repeat="slide in slides|limitTo:5" ng-style="{'background-image': 'url(' + slide.img + ')'}">
<div class="debug">
{{ slide.label }} / {{ slides.length }}
</div>
</li>
</ul>
</div>
</div>
</div>
in app.js
var app = angular.module("demoApp",
["ngRoute", "ngSanitize", "ngResource", "ui.bootstrap",
"angularMoment", "blockUI",'facebook','directive.g+signin',
"angular-carousel","swipe"
]);
and also added controller of the given reference.
How can i support it in Safari?
I'm use jquery.carouFredSel.js for Angular apps
For example, in directive
restrict: 'E',
controller: [ "$scope", function($scope) {
var slides = $scope.slides = [];
// Add slides here
slides.push({
image: '',
alt: ''
});
}],
link: function($scope, element, attrs) {
$scope.$watch('mycarousel', function() {
// this jquery.carouFredSel.js example setup begin
$('#mycarousel').carouFredSel({
width: '100%',
items: {
visible: 'odd+2'
},
scroll: {
pauseOnHover: true,
onBefore: function() {
$(this).children().removeClass( 'hover' );
}
},
auto: {
items: 1,
easing: 'linear',
duration: 1250,
timeoutDuration: 0
},
pagination: {
container: '#pager',
items: 1,
duration: 0.5,
queue: 'last',
onAfter: function() {
var cur = $(this).triggerHandler( 'currentVisible' ),
mid = Math.floor( cur.length / 2 );
cur.eq( mid ).addClass( 'hover' );
}
}
});
// setup carousel end
})
},
In HTML template
<div id="wrapper"><div id="mycarousel">
<div ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" alt="{{slide.alt}}" width="200" height="200" />
<span>{{slide.alt}}</span>
</div>
</div><div id="pager">
</div></div>
Related
I need to set custom dots in owl carousel. I have this code in JS:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotsData: ["<button role='button' class='owl-dot'></button><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' xml:space='preserve'><path class='loader' transform='translate(125, 125) scale(.84)'></svg>"],
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
But with this code nothing happend, just undefined dots are displayed. Is even possible to make custom dots like this?
Change the following code like this:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotData: true,
dotsData: true
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
Add your dots data in your owl-item:
<div class="item" data-dot="<button role='button' class='owl-dot'></button>">
<!-- Your Image -->
</div>
So looking at the documentation, the dotsData option takes a boolean which just tells Owl Carousel to look for the data-dot attribute for each item a dot is shown for. So your custom markup needs to go into the HTML rather than being passed in as a string when configuring the carousel in JS.
If you check this Fiddle you can see how the JS option relates to the HTML data attribute: https://jsfiddle.net/4xymnwey/
HTML
<ul class="owl-carousel owl-theme">
<li class="carousel-slot" data-dot="<p>text 1</p>">slide 1</li>
<li class="carousel-slot" data-dot="<p>text 2</p>">slide 2</li>
<li class="carousel-slot" data-dot="<p>text 3</p>">slide 3</li>
</ul>
JS
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
dotsData: true
});
Credit to this issue comment on GitHub for the answer. I hope that helps :)
If nothing helped to you.
Try to achieve manually.
Here is the example:-
HTML Auto-generated by Owl-carousel
<div class="owl-controls">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
It will auto-generated by Owl carousel.
select parent id/class of this and change content using javascript or jquery. It's totally up to you.
here is the example:-
Javascript
var dots = document.querySelectorAll("#testomonial .owl-pagination .owl-page");
let i=1;
dots.forEach((elem)=>{
elem.innerHTML = i;
i++;
})
hello i am new in angularjs following is my code of the html.
<div class="circular-bar" ng-repeat="cat1 in ['15']">
<div class="chart" data-percent="{{cat1}}" data-bar-color="#e75200">
</div>
</div>
in the above code pie chart bar color display fine but in the below code bar color not display.here categorydata is the object which is dynamically come from the database.here data display properly bar also display but barfilled color not display in below code.
<div ng-repeat="cat in categorydata">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 ">
<!--circular-bar-->
<div class="circular-bar">
<div class="chart" data-percent="{{cat.offers.length}}" data-bar-color="#e75200" chart1>
<label><span class="percent">{{cat.offers.length}}</span></label>
</div>
</div>
<div class="clearfix"></div>
<div class="offerssub clr1">
<h3>{{cat.name}}</h3>
<h4>Redeemed</h4>
<span>0</span>
</div>
</div>
</div>
here is my angularjs directive.
app.directive('chart1', function() {
return {
restrict: 'AEC',
scope: {
data: '=',
categorydata:'=categorydata'
},
link: function(elem, attr) {
$(function() {
//jQuery(elem).bar
jQuery('.chart').easyPieChart({
lineWidth:35,
scaleColor:false,
size:330,
lineCap: 'square',
});
});
}
}
})
set only timeout in your directive that will help you to display pie chart after populating your data.
please follow below code when you use any jquery chart in angularjs at that time use timeout.
app.directive('chart1', function() {
return {
// restrict: 'A',
/* scope: {
data: '=',
categorydata:'=categorydata'
},*/
link: function(elem, attr) {
$(function() {
//jQuery(elem).bar
setTimeout(function () {
jQuery('.chart').easyPieChart({
lineWidth:35,
scaleColor:false,
size:330,
lineCap: 'square',
});
}, 200);
});
}
}
})
Plunker Demo
I created two custom directives for template usage in a ng-repeater.
Outside of the ng-repeater, the directives work. Once I try to dynamically load the directives in a ng-repeater, the directives do not load at all. In fact - when use "Inspect Element" - the {{expressions}} do not dynamically update.
Here is how my ng-repeater looks:
<div ng-repeat="section in content">
<section class="section-{{ section.block }}" block="{{ section.block }}">{{ section.block }}</section>
</div>
I am calling the directives via restrict: C
Here is one of the directives:
.directive('sectionHeader', function() {
return {
restrict: 'EAC',
scope: {
block: '='
},
templateUrl: 'sectionHeader.html'
};
})
Here is the templateURL:
<div class="container">
<figure class="icon">
<img class="img-fluid" ng-src="{{ block.icon }}" title="App Icon">
</figure>
<h1>{{ block.title }}</h1>
<figure class="hero">
<img class="img-fluid" ng-src="{{ block.image }}" title="App">
</figure>
</div>
And a snippet of the JSON:
$scope.content = [
{
block: 'header',
icon: 'http://www.placehold.it/128x128?text=PLACEHOLpng',
title: 'Header Title',
image: 'http://www.placehold.it/1200x675?text=PLACEHOLDER'
},...
];
Now, I believe The templateUrls are not loading because it seems like the directives are being executed before ng-repeat get its content. What I believe I need to do is to execute the directives after ng-repeat receives the content. I am not sure where to start.
Thanks.
You can achieve that using $compile function.
See example on plunker.
Create general directive with $compile.
.directive('section', function($compile) {
return {
restrict: 'EAC',
scope: {
block: '='
},
link:function(scope,elem){
if(scope.block)
$compile(elem.html('<section-'+scope.block.block+' block="block">'))(scope);
}
};
})
Create two different directive.
.directive('sectionHeader', function() {
return {
restrict: 'EAC',
scope: true,
templateUrl: 'sectionHeader.html'
};
})
.directive('sectionHundred', function() {
return {
restrict: 'EAC',
scope: true,
templateUrl: 'sectionHundred.html'
};
});
And usage
<div ng-repeat="section in content">
<section block="section"></section>
</div>
JSON data:
[
{
block: 'header',
icon: 'http://www.placehold.it/128x128?text=PLACEHOLpng',
title: 'Header Title',
image: 'http://www.placehold.it/1200x675?text=PLACEHOLDER'
},
{
block: 'hundred',
icon: 'http://www.placehold.it/128x128?text=PLACEHOLpg',
title: 'Hundred Title',
content: 'Hundred Content',
link: {
copy: 'Link Copy',
title: 'Link Title',
url: '#'
},
image: 'http://www.placehold.it/1200x675?text=PLACEHOLDER'
}
];
You cannot use directive by passing their name dynamically.
But a possible workaround is to use ng-switch instead :
<div ng-repeat="section in content">
<div ng-switch="section.block">
<section ng-switch-when="header" class="section-header" block="{{ section.block }}">{{ section.block }}</section>
... another ng-switch...
</div>
See this post for more details
Though #stepan-kasyanenko gave me a correct answer - I further removed extra lines of code not needed to minimize the build.
New Plunker Link with answer added.
home.html
Old:
<div ng-repeat="section in content">
<section block="section"></section>
</div>
New:
<section ng-repeat="section in content" block="section"></section>
I placed the ng-repeat in the <section> that calls the directive
directives
.directive('sectionHeader', function() {
return {
restrict: 'EAC',
replace: true,
scope: true,
templateUrl: 'sectionHeader.html'
};
});
I added replace: true, to both directives because the ng-repeat builds out another <section> inside of the <section ng-repeat> element
Thank you #stepan-kasyanenko
I have a modal service in my app that opens/closes a modal. When the modal is opened, it plucks its content from the div with the specified id, which always sits inside a container elem that is hidden. Normally this works fine.
The problem I'm having now is that when a user opens the modal with the mediaBrowser directive for the first time, they can navigate between the photos/videos tab and select an item to attach to a post. If the modal is closed and reopened though, nothing works. The photos load as expected, but clicking one does nothing. It's as if none of the functions in the mediaBrowser or mediaBrowserPhotos directive work.
I thought it might have something to do with needing to compile the directive after its moved from one DOM element to another, but I've not had much luck resolving it with the $compile service.
Here is my modal service:
app.service('modal', [function() {
var modal = this;
modal.settings = {};
modal.overlay = $('<div id="overlay"></div>');
modal.modal = $('<div id="modal"></div>');
modal.content = $('<div id="content"></div>');
modal.closeBtn = $('<div id="close"><i class="fa fa-times"></div>');
modal.modal.hide();
modal.overlay.hide();
modal.modal.append(modal.content, modal.closeBtn);
$(document).ready(function(){
$('body').append(modal.overlay, modal.modal);
});
modal.open = function (settings) {
modal.settings = settings;
var content = modal.settings.content;
modal.content.empty().append(content);
if(modal.settings.class) modal.modal.addClass(modal.settings.class);
if(modal.settings.height) modal.modal.css({ height: settings.height });
if(modal.settings.width) modal.modal.css({ width: settings.width });
if(modal.settings.content_height) modal.modal.css({ height: settings.content_height });
if(modal.settings.content_width) modal.modal.css({ width: settings.content_width });
if(modal.settings.fitToWindow) {
modal.settings.width = $(window).width() - 160;
modal.settings.height = $(window).height() - 160;
};
center(modal.settings.top);
$(window).bind('resize.modal', center);
modal.modal.show();
modal.overlay.show();
$(modal.closeBtn).add(modal.overlay).on('click', function(e) {
e.stopPropagation();
modal.close();
});
$(document).on('keyup', function(e) {
if (e.keyCode == 27) {
modal.close();
$(document).unbind('keyup');
}
})
};
modal.close = function() {
var elem = modal.settings.elem;
var content = modal.settings.content;
elem.empty().append(content);
modal.modal.hide();
modal.overlay.hide();
modal.content.empty();
$(window).unbind('resize.modal');
};
function center(top) {
if(!top || !isInt(top)) top = 130;
var mLeft = -1 * modal.modal.width() / 2;
modal.modal.css({
top: top + 'px',
left: '50%',
marginLeft: mLeft
});
function isInt(n) {
return n % 1 === 0;
}
}
}]);
I also have a mediaBrowser directive in my app, which housed 2 child directives representing a photos and videos tab. Here is my mediaBrowser directive:
app.directive('mediaBrowser', ['$rootScope', 'profileAPI', 'photosAPI', 'videosAPI', function($rootScope, profileAPI, photosAPI, videosAPI) {
return {
replace: true,
templateUrl: '/assets/employers/media_browser.html',
scope: {
model: '=',
card: '=',
type: '=',
photoContainer: '=',
videoContainer: '=',
mediaBrowserContainer: '=',
mediaBrowserForm: '='
}, controller: ['$scope', '$rootScope', 'profileAPI', 'photosAPI', 'videosAPI', function($scope, $rootScope, profileAPI, photosAPI, videosAPI) {
$scope.mediaView = profileAPI.mediaView;
resize($scope.mediaView);
$rootScope.$on('mService:keyChanged', function resultsUpdated(event, value) {
$scope.mediaView = profileAPI.mediaView;
resize($scope.mediaView);
});
$scope.setMediaView = function(view) {
profileAPI.mediaView = view;
};
function resize(resource) {
if(resource === 'photos') {
photosAPI.resizeColumns('#media_browser_photos_new_' + $scope.type);
} else if (resource === 'videos') {
videosAPI.resizeColumns('#media_browser_videos_new_' + $scope.type);
}
}
}]
}
}]);
Here is the partial for the mediaBrowser directive:
<div style="display:none" id="{{mediaBrowserContainer}}">
<div id="{{mediaBrowserForm}}">
<div class="row">
<div class="col-lg-12">
<div class="row subheader modal-tabs">
<ul class="nav navbar-nav">
<li ng-class="{'active-sub': mediaView === 'photos'}">
<a ng-click="setMediaView('photos');">Photos</a>
</li>
<li ng-class="{'active-sub': mediaView === 'videos'}">
<a ng-click="setMediaView('videos');">Videos</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row" ng-if="mediaView === 'photos'">
<div media-browser-photos
model="model"
container="photoContainer"
media-browser-container="mediaBrowserContainer"
media-browser-form="mediaBrowserForm"
for-type="type"
mode="'new'">
</div>
</div>
<div class="row" ng-if="mediaView === 'videos'">
<div media-browser-videos
model="model"
container="videoContainer"
media-browser-container="mediaBrowserContainer"
media-browser-form="mediaBrowser"
for-type="type"
mode="'new'">
</div>
</div>
</div>
</div>
Here is my mediaBrowserPhotos directive. Note that the videos version is basically identical to photos:
app.directive('mediaBrowserPhotos', ['$rootScope', '$timeout', '$q', 'photosAPI', 'modal', function($rootScope, $timeout, $q, photosAPI, modal) {
return {
replace: true,
templateUrl: '/assets/employers/media_browser_photos.html',
scope: {
container: '=',
model: '=',
mediaBrowserContainer: '=',
mediaBrowserForm: '=',
forType: '=',
mode: '='
}, controller: ['$scope', '$rootScope', '$timeout', '$q', 'photosAPI', 'modal', function($scope, $rootScope, $timeout, $q, photosAPI, modal) {
$scope.current_page = photosAPI.current_page;
$scope.results = [];
$scope.loading = false;
$scope.num_pages = 0;
$scope.page_numbers = photosAPI.page_numbers;
$scope.total_count = 0;
$scope.count = 0;
$scope.order = false;
var thumbSize = 150;
var q = $scope.current_page;
$rootScope.$on('cService:keyChanged', function resultsUpdated(event, value) {
$scope.results = photosAPI.results;
$scope.loading = photosAPI.loading;
$scope.num_pages = photosAPI.num_pages;
$scope.page_numbers = photosAPI.page_numbers;
$scope.total_count = photosAPI.total_count;
});
$scope.selectMedia = function(options) {
if($scope.mode === 'new') {
var content = '#add_card_form';
var elem = '#add_card_form_container';
} else {
var content = '#' + $scope.forType + '_' + $scope.model.id + '_form';
var elem = '#' + $scope.forType + '_' + $scope.model.id + '_form_container';
};
$scope.model[options.type] = options.object;
modal.close();
modal.open({
content: $(content),
elem: $(elem),
height: '594px',
content_height: '578px'
})
}
}]
}
}]);
Here is the partial for mediaBrowserPhotos:
<div class="column-layout cols-3 search-results-no-resize" id="{{container}}">
<div class="multiple-photo-upload media">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="orderAsc();">
Sort by Date
Oldest First <i class="fa fa-arrow-up" style="font-size: 1.3em;"></i>
Newest First <i class="fa fa-arrow-down" style="font-size: 1.3em;"></i>
</button>
<div class="paginator" ng-if="page_numbers.length > 1">
<div class="page-btn prv" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></div>
<div class="page-btn" ng-repeat="p in page_numbers" ng-class="{'current':p === current_page}" ng-click="loadPage(p)">{{p}}</div>
<div class="page-btn nxt" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></div>
</div>
</div>
<div class="results-label media"><b>{{total_count}}</b> <span ng-if="total_count == 1">Photo</span><span ng-if="total_count != 1">Photos</span></div>
<div class="media-browser photos" ng-show="!loading && total_count > 0">
<div class="col">
<div ng-repeat="r in results" class="card result-link">
<div class="content result">
<div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}" ng-click="$parent.selectMedia({object: r, type: 'image'})"></div>
</div>
</div>
</div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<br style="clear:both" />
</div>
<div ng-show="loading" class="loading-results">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The whole app itself is pretty complex and difficult to reproduce in a Plucker/Fiddle. Any help would be greatly appreciated. Let me know of you need any additional code from the app!
Try this: instead of moving the whole thing, wrap it in another element, leave that one in place and move the same element you were moving now (now the child of the element in your link function).
If you don't use replace:true, which is deprecated anyway, you get that element for free (the directive's element).
Good luck!
I am studying the Localization example at the bottom of AngularJS home page.
I am looking at the source of the page and try to do exactly what the demo shows me.
However, I can't seem to fire up the demo code. The lines that confused me the most are:
<span class="pull-right"
js-fiddle="tabs.html components.js beers.js" module="components"> ...
<div app-run="tabs.html" module="components-us" class="well"> ...
Because I don't recognise app-run or js-fiddle to be AngularJS syntax (or is it?). Anyway, the demo app doesn't fire up. Could you please help me take a look?
Here is the code I COPY & PASTE from AngularJS home page and put in index.html: (change the header base and libraries to your directory accordingly)
index.html
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<!-- ************IMPORTANT !! change this to your directory************ -->
<base href='http://localhost/angularjs/localization/' />
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>
<div class=" row example">
<div class="span1 app-source" app-source="tabs.html components.js beers.js" annotate="tabs.annotation" module="components"></div>
<div class="span4">
<span hint></span>
<span class="pull-right" js-fiddle="tabs.html components.js beers.js" module="components"></span>
<div class="tabs-spacer"></div>
<h4>Locale: {{ 'US' }}</h4>
<div app-run="tabs.html" module="components-us" class="well"></div>
<div class="tabs-spacer"></div>
<h4>Locale: {{ 'SK' }}</h4>
<div app-run="tabs.html" module="components-sk" class="well"></div>
</div>
</div>
<script>
angular.module('components-us', ['components', 'ngLocal.us']);
angular.module('components-sk', ['components', 'ngLocal.sk']);
</script>
<script type="text/ng-template" id="tabs.html">
<tabs>
<pane title="Localization">
Date: {{ '2012-04-01' | date:'fullDate' }} <br>
Currency: {{ 123456 | currency }} <br>
Number: {{ 98765.4321 | number }} <br>
</pane>
<pane title="Pluralization">
<div ng-controller="BeerCounter">
<div ng-repeat="beerCount in beers">
<ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
</div>
</div>
</pane>
</tabs>
</script>
<script id="beers.js">
function BeerCounter($scope, $locale) {
$scope.beers = [0, 1, 2, 3, 4, 5, 6];
if ($locale.id == 'en-us') {
$scope.beerForms = {
0: 'no beers',
one: '{} beer',
other: '{} beers'
};
} else {
$scope.beerForms = {
0: 'žiadne pivo',
one: '{} pivo',
few: '{} pivá',
other: '{} pív'
};
}
}
</script>
<script id="components.js">
angular.module('components', []).
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function($scope, $element) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
},
template:
'<div class="tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'{{pane.title}}' +
'</li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
replace: true
};
}).
directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '#' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
'</div>',
replace: true
};
})
</script>
</body>
</html>
Also, where are app-run and js-fiddle from? I can't figure out if they are features belong to AngularJS or what.
app-run and js-fiddle are custom Angular directives -- i.e., directives they wrote to help run the AngularJS home page (hence the reason they are in the file aptly named homepage.js).
Here is a working plnkr of the demo.