directive not accessing elements generated by ng-repeat

[Jake K.]

Hello,

I am trying to write a directive that can access elements generated by

ng-repeat.

So far I have the following:

main view

<div>

...

  <mydir></mydir>

</div>

mydir definition

myApp.directive( 'mydir', function(){

  var def = {

    restrict: 'E',

    templateUrl: 'path-to-my-template',

    .....

  }

 return def;

});

inside 'path-to-my-template' file

<div>

....

  <div class="repeatelement" ng-repeat>...</div>

</div>

I am trying to access the elements generated in ng-repeat inside mydir directive, with no success so far.

What I try to do is sth like this:

  var myng-repeat-elements = element.find('.repeatelement');

But when I console log myng-repeat-elements.length, I get 0

Thanks

[Sander Elias]

Hi Jake,

Have a look at the pre and post link functions.

Regards

Sander

[Jake K.]

Hello, Sanders Elias

Thanks for your reply. I had already done that before resorting to the angular group.

This is what I did to resolve my issue.

<div outerdirective>

  <div ng-repeat="element in list" rendered>

   ...

  </div>

</div>

Basically I created a directive rendered, which triggers an $emit event. Then inside

the outerdirective I add an $on, to catch the event and get a copy of each element rendered with ng-repeat.

This works perfect, but I was wondering if it's good practice...

If not, may I ask for a small example ( e.g. plunk ) that does this without events?

Thanks

2014-01-28 Sander Elias <sande...@gmail.com>

--
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/ZzYUvojnEBE/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/groups/opt_out.

--
JAKE KWON +1 (604) 655 3109
email: jyk...@gmail.com

[Sander Elias]

Hi Jake,

Hmm, that's not really where events are intended for. What is it you are trying to accomplish?

There are many way's to resolve this issue. Given your need, there will sure be one the fit's nicely.

Can you put up a plunk of what you are trying to do, or what you have now. I will take a look at it!

Regards

Sander

[Jake K.]

Hi,

Thanks for pointing that out.

I made a quick plunk so you see what I mean. 

http://plnkr.co/edit/wbgTl5MosUuvnE3k5HkU?p=preview

You will see that the list generated by ng-repeat shows length 0. So what

I am suspecting is that the directive executes before ng-repeat renders out.

Thanks

2014-01-29 Sander Elias <sande...@gmail.com>

--

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/ZzYUvojnEBE/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/groups/opt_out.

[Sander Elias]

Hi Jake, 

Found your question :)

element.find() only looks for elements, if you really want/need to do it this way, include jQuery.

However, I think this the backward way of doing this!

Let me explain a bit what I mean. I'll make a step wise description.

1. you have an array in your code.
2. you use ng-repeat to render this array into your view
3. you create a directive for your view
4. in your directive you are traversing the dom to find how many times you repeated?

To me, it looks like a better idea to use ```$scope.myArray.length``` , or am I missing something.

have a look at this: http://plnkr.co/edit/IQSvr5L5IMRRzfrXVYSR?p=preview

I just used the scope directly in your directive, there are better/nicer/cleaner way's to solve this. but it does get the point across?

Regards

Sander

[Jake K.]

Hello, Elias

This email is regarding the example at http://plnkr.co/edit/IQSvr5L5IMRRzfrXVYSR?p=preview ( ng-repeat ).

Thanks for the plunker. Actually I'm afraid I gave you a bad example of what I wanted.

I wanted to extract the element itself ( dom ) that's being generated by ng-repeat, not just the length.

I'll explain with more details what I want:

I want to be able to create a 'carousel' with the elements generated by ng-repeat. A good example can be found here http://sorgalla.com/jcarousel/, but I want to do it the 'angular way', with css transitions.

However I have to manipulate the css properties ( left ) of the elements generated by ng-repeat, but I am not sure how to access them. I tried using ng-animate, which works great only for 1 direction ( I'm not sure how to use ng-animate for both left and right )

I'd appreciate if you can provide me with some guidelines on how to create a carousel the angular way.

Thanks

--
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/ZzYUvojnEBE/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/groups/opt_out.

[Ricardson Albuquerque]

Jake,

 

check angularui: http://angular-ui.github.io/bootstrap/#/carousel

Ricardson Albuquerque

--
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 angular+u...@googlegroups.com.

[Sander Elias]

Hi Jake,

Well, there are carousels around already, as Ricardson pointed out already. There are even more if you google around for a bit.
My guess is, you still want to build your own ;)
have you thought of the possibility of repeating your own directive?
something like:

<carousel my-option=....>
    <carousel-item ...></carousel-item>
</carousel>

you have your element available in your items, and you can handle the stuff in your carousel controller.
in your carousel-item you can require the carousel, and then you have the controller of that directly available.

If you need more help with this, just ask!

Regards
Sander