AngularJS Directive, ng-repeat and a Jquery Plugin -
i have section @ html load testimonials , i'm using flexslider on it.
the markup looks this:
<section class="testimonials"> <div class="row"> <div class="small-12 column"> <div class="flexslider"> <ul class="slides"> <li> <h2>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod</h2> <span>- author name</span> </li> <li> <h2>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod</h2> <span>- author name</span> </li> <li> <h2>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit</h2> <span>- author name</span> </li> <li> <h2>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod</h2> <span>- author name</span> </li> <li> <h2>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod</h2> <span>- author name</span> </li> </ul> </div> <div class="author-thumbs"> <ul class="slides"> <li> <div> <span class="container"> <img src="assets/img/testimonial-author-pic.jpg" alt=""> </span> </div> </li> <li> <div> <span class="container"> <img src="assets/img/testimonial-author-pic.jpg" alt=""> </span> </div> </li> <li> <div> <span class="container"> <img src="assets/img/testimonial-author-pic.jpg" alt=""> </span> </div> </li> <li> <div> <span class="container"> <img src="assets/img/testimonial-author-pic.jpg" alt=""> </span> </div> </li> </ul> </div> </div> </div> at first got in trouble because since angular loading partial file after document ready, sliders stopped working. moved flexslider initialization directive. this:
app.directive('testimonials', function() { return { restrict: 'a', link: function(scope, element, attrs) { element.find('.author-thumbs').flexslider({ animation: "slide", controlnav: "thumbnails", controlnav: false, directionnav: false, itemwidth: 80, minitems: 4, maxitems: 4, asnavfor: ".testimonials .flexslider", }); element.find('.flexslider').flexslider({ animation: "slide", controlnav: "thumbnails", controlnav: false, directionnav: false, smoothheight: true, sync: ".testimonials .author-thumbs" }); } }; }); this way got work adding testimonials @ section html.
okay, want take static content , move controller , make ng-repeat. did this:
app.controller('homectrl', function($scope){ $scope.testimonials = [ {"quote":"lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod", "author":"author name", "img":"assets/img/testimonial-author-pic.jpg"}, {"quote":"lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit.", "author":"author name", "img":"assets/img/testimonial-author-pic.jpg"}, {"quote":"lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod", "author":"author name", "img":"assets/img/testimonial-author-pic.jpg"}, {"quote":"lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod", "author":"author name", "img":"assets/img/testimonial-author-pic.jpg"}, ] }); created new file testimonials section markup , changed it's directive of type e:
app.directive('testimonials', function() { return { restrict: 'e', replace: true, templateurl: 'partials/elements/testimonials.html', link: function(scope, element, attrs) { element.find('.author-thumbs').flexslider({ animation: "slide", controlnav: "thumbnails", controlnav: false, directionnav: false, itemwidth: 80, minitems: 4, maxitems: 4, asnavfor: ".testimonials .flexslider", }); element.find('.flexslider').flexslider({ animation: "slide", controlnav: "thumbnails", controlnav: false, directionnav: false, smoothheight: true, sync: ".testimonials .author-thumbs" }); } }; }); and now... well, testimonials show flexslider not being initialized. know did wrong? i'm looking , answer explain why did wrong, since i'm trying learn it.
i'm running angularjs 1.3.15
i managed working wrapping flexslider initialization inside $timeout, this:
app.directive('testimonials', function($timeout) { return { restrict: 'e', replace: true, templateurl: 'partials/elements/testimonials.html', link: function(scope, element, attrs) { $timeout(function(){ element.find('.author-thumbs').flexslider({ animation: "slide", controlnav: "thumbnails", controlnav: false, directionnav: false, itemwidth: 80, minitems: 4, maxitems: 4, asnavfor: ".testimonials .flexslider", }); element.find('.flexslider').flexslider({ animation: "slide", controlnav: "thumbnails", controlnav: false, directionnav: false, smoothheight: true, sync: ".testimonials .author-thumbs" }); }); } }; }); what happens is, since testimonials variable hardcoded need $timeout run javascript after done loading.
when change load testimonials server, $watch better solution dennis smolek suggested because actual change testimonials happen, triggering flexlider init. i'm not 100% sure since haven't tested yet, believe going work. i'll update answer when make changes , test it
Comments
Post a Comment