Using ng-repeat with a jQuery library to create a coverflow

[Stephen Adams]

Hi,

I am trying to create a coverflow using this jQuery library (http://brokensquare.com/Code/jquery-flipster/demo/ ). The ul that runs this coverflow is created using ng-repeat to loop over a collection of objects from my controller. In each li I create the panel for the coverflow injecting information from the objects (title, date etc) into the panels in the coverflow.

Unfortunately this is not working. When I create  simple static cover flow using the same jQuery library it works. When I use ng-repeat to generate the UL the panels do not have the jQuery library applied to them. I think the reason is because the ng-repeat generates the panels after the jQuery library has been applied and it cannot find anything to apply it too. I have added the call to start the jQuery flipster library running at the bottom of my HTML page within a document.ready, but it appears that ng-repeat has not finished rendering the ul until after the document is ready.

What is a better way to create this so I can apply the jQuery effect to my HTML?

Thanks

Stephen

[Joberto Diniz]

" I have added the call to start the jQuery flipster library running at the bottom of my HTML page within a document.ready"

Don't do that.

You have to create a directive. Directives are the way to manipulate DOM elements: https://docs.angularjs.org/misc/faq#dom-manipulation

Resources:

http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angular-js

http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html

[Joberto Diniz]

Examples:

https://github.com/konsumer/angular-cardflow

https://github.com/southdesign/angular-coverflow

On Friday, October 3, 2014 7:36:32 AM UTC-3, Stephen Adams wrote:

[Stephen Adams]

Thank you Joberto, I'll take a look at these.

--
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/_C2gunaGY6c/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.