Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
AngularJS Directive for looping through and displaying multiple headers
directives.directive('headerSwitcher', function() {
return {
restrict: 'A',
scope: {
elementType: '='
link: function(scope, element, attrs) {
var headers = $(element).children(scope.elementType),
headerIndex = -1;
function showNextHeader() {
// show first header immediately
if(headerIndex === 0) {
headers.eq(headerIndex % headers.length)
.fadeOut(1000, showNextHeader);
// then fade them in
else {
headers.eq(headerIndex % headers.length)
.fadeOut(1000, showNextHeader);
<div header-switcher="h1">
<h1 style="display:none">First Header</h1>
<h1 style="display:none">Second Header</h1>
<h1 style="display:none">Third Header</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment