Another question about directives and jquery

91 views
Skip to first unread message

Jeremy Fry

unread,
Feb 12, 2013, 11:55:55 AM2/12/13
to ang...@googlegroups.com
So I've been wracking my head with trying to get Angular to play nice with a jQuery slideshow plugin. I have a working chunk of code now, but I don't feel like it's the "angular" way to do it. If I remove the timeout from my directive then I get the angular code fed into my plugin rather than the actual source for the image. Not sure the proper way to do this, but I'm interested in learning it.

The html:
<ul class="slideshow">
<li class="image" ng-repeat="image in listing.photoArray" pikachoose>
<img src="{{_i(image, listing.posted_date, 'l')}}">
</li>
</ul>

Here's the directive:
myapp.directive('pikachoose',function(){
  return {
    compile: function (element, attrs){
      return function (scope, iElement, iAttrs, controller) {
        if(scope.$last){
          console.log(iElement.find('img').attr('src')); //outputs {{_i(image, listing.posted_date, 'l')}} not the actual source
          setTimeout(function(){
            //plugin runs on the ul, not the li
            iElement.parent().pikachoose();
            //without the timeout I get {{_i(image, listing.posted_date, 'l')}} instead of the actual source
          }, 0);
        }
      };
    }
  };
});

Chris Trude

unread,
Dec 2, 2014, 6:43:26 PM12/2/14
to ang...@googlegroups.com
Hey Jeremy, Funny seeing you here! A few things here, You are not really building the directive properly in my opinion Here's how I would do it, and after I write it here, I'm going to implement it in my code and see if it works so hold tight:

HTML:
<pikachoose photos="listing.photoArray" listing="listing"> </pikachoose>

Angular Directive:
myapp.directive('pikachoose', function(){
    return{
restrict: 'EA',
replace: true, 
scope: {photos: '=', listing: '='},
template: '<ul class="slideshow><li ng-repeat="image in photos" class="image"><img src="image"></li>', 
          link: function(scope, element) {
angular.element(element).pikachoose();
} 
  }
}

I'll be testing this out shortly and will let you know if it works for me. I'm not sure what your object structure looks like, so this assumes that image is a url, if not thats easily fixed. Also i have no idea what you are doing with this: {{_i(image, listing.posted_date, 'l')}} or scope.$last, So I left those out for now.

-Chris Trude

Chris Trude

unread,
Dec 2, 2014, 7:11:46 PM12/2/14
to ang...@googlegroups.com
So I'm making headway, but now getting an error that I don't know what to do with. Here's my updated code: 


'use strict';

angular.module('myApp')
  .directive('pikachoose', function () {
    return {
      templateUrl: 'app/pikachoose/pikachoose.html',
      restrict: 'EA',
      link: function (scope, element) {
        angular.element('#pika').pikachoose({
          showCaption: false,
          transition: 6,
          autoPlay: false,
          carousel: true
        });
      },
      controller: function($scope, $timeout){
        var setPhotos = function(){
          $scope.photos = $scope.listing.photos[0].photo;
        }

        if (!$scope.listing){
          $timeout(setPhotos);
        }
      }
    };
  });


And the error:

 TypeError: Cannot read property 'left' of undefined

Jeremy Fry

unread,
Dec 3, 2014, 9:21:41 AM12/3/14
to ang...@googlegroups.com
That looks like jCarousel is throwing the error on that. You could try updating the included version of jCarousel (not my script) and see if that helps. I would start by turning off the carousel though just to confirm my suspicions. 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LRTh1E21P5I/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages