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
at Object.$.jCarousel.plugin.closest
(http://localhost:9000/bower_components/jcarousel/dist/jquery.jcarousel.js:381:49)
at Object.$.jCarousel.plugin._reload
(http://localhost:9000/bower_components/jcarousel/dist/jquery.jcarousel.js:335:33)
at Object.$.jCarousel.plugin._create
(http://localhost:9000/bower_components/jcarousel/dist/jquery.jcarousel.js:289:18)
at Object.create
(http://localhost:9000/bower_components/jcarousel/dist/jquery.jcarousel.js:79:22)
at Object.$.(anonymous function)
(http://localhost:9000/bower_components/jcarousel/dist/jquery.jcarousel.js:175:18)
at HTMLUListElement.<anonymous>
(http://localhost:9000/bower_components/jcarousel/dist/jquery.jcarousel.js:219:25)
at Function.jQuery.extend.each
(http://localhost:9000/bower_components/jquery/dist/jquery.js:375:23)
at jQuery.fn.jQuery.each
(http://localhost:9000/bower_components/jquery/dist/jquery.js:139:17)
at $.fn.(anonymous function) [as jcarousel]
(http://localhost:9000/bower_components/jcarousel/dist/jquery.jcarousel.js:213:22)
at Object.$pc.fn.extend.build
(http://localhost:9000/bower_components/pikachoose-bower/lib/jquery.pikachoose.js:218:15)
<pikachoose>
On Tuesday, December 2, 2014 6:43:26 PM UTC-5, Chris Trude wrote:
>
> 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
>
> On Tuesday, February 12, 2013 11:55:55 AM UTC-5, Jeremy Fry wrote:
>>
>> 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);
>> }
>> };
>> }
>> };
>> });
>>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
