AngularJS way of doing jQuery.before and jQuery.after

[Kevin W]

The jqlite has append but it doesn't have before and after.

Does anyone know of the appropriate way to perform these actions (before/after)?

Thanks!

Kevin

[Kevin W]

So I completely missed that jqlite DOES have the after method.  But no before.  Or detach.  Any thoughts?  For now I'm just doing it based on jQuery's source but I'm wondering if there's a better way.

Thanks!

[Eric Eslinger]

If you include jqeury on your page before you include angularjs, angular uses jquery instead of jqlite. That said, you probably are fighting the framework if you need to use jquery stuff. Append / Before / After, all that is supposed to be ng-if and ng-repeat and so forth declaratively in the document.

e

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

[Kevin W]

Eric - I realize I can use jQuery.  I was just trying to avoid it on principle (while I'm still learning angularjs).

I know for many things, having content already in the page with ng* attributes is the way to go.  However, I really am doing dynamic work here based on drag & drop so it wouldn't make sense to have all the possible permutations baked into the HTML.

I think I have decided, however, that for this complex UI manipulation, it'll make sense to just stick with jQuery within my directives.

Thanks!

Kevin

On Friday, September 5, 2014 11:40:30 AM UTC-6, Kevin W wrote:

[Jens Melgaard]

You can still do complex drag and drop and much other using Angular, what you need is a model to describe your structure, and then just let Angular render that, it's now about making "all possible" permutations in html...

[Eric Eslinger]

Yeah, I'm not sure where the breakpoint is between easy and hard from the framework perspective, but in a generic ng-repeat / tree directive kind of situation, I'd approach D&D by moving attributes around on a model object (reorder in the array, moving from foo.tubers to foo.vegetables and so on), and then let angular render the DOM appropriately.

OTOH, that may be over-engineering a simple enough use pattern for jQuery.

e

--

[Kevin Warnke]

Eric-

 

I agree with your approach for a drag/drop treeview type solution. However, this is not that simple.  I’m building a layout manager that lets you drag & drop widgets around the page (add, move, delete, etc.).  As you are dragging, I need to insert a placeholder to shift things around to show where the drop will occur if you let go now.  This includes adding widgets above/below existing widgets, causing new columns to get created, or new rows.  So to do this ahead of time I’d have to build in a top/bottom/colright/colleft/rowtop/rowbottom element on every single widget.  That’s a lot of excess HTML rather than just injecting the placeholder where it needs to be depending on where the current dragover is occurring.

 

Thanks for everyone’s input!

Kevin

--
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/BK5g2T77frY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Sander Elias]

Hi Kevin,

A insert before is easily mimicked with plain js.
something like this will do:

function inserBefore(elem,newElem) {
   elem.parentNode.insertBefore(elem,newElem);
}

You need to use the plain DOM elements, not the wrapped ones (elem[0] most off the time!)
Regards
Sander

​

[Jens Melgaard]

Actually you could do this by simply creating a "WidgetSocket" Directive which will transclude it's widget in and just add those placeholders to that using ng-if (which actually removes them from the DOM if they are not used).

There is probably other simple solutions which actually will let you do this in a "declarative" way... Things tend to always end up being more simple with pure Angular, but you need to learn to allot about directives in order to get there, like directives that communicate, transclude and reuse of all the directives that already exists... But IMO it's worth learning, as it will save much time later on...

Anyways, that is just my experience.

[Kevin W]

Jens-

I was not aware that ng-if removes things from the DOM when they are not used.  That certainly makes me wonder about whether taking another look might be worth it.

When there is a change in a value that Angular detects, is the ENTIRE page/controller/ngApp re-built or just the area of the page that would have an impacted change?  For example, if I'm hovering over a certain area of the widget, and a placeholder to the right needs to appear (and is set up up with ng-if), is the only change that will occur the insertion of that DOM element or will the entire area/page be regenerated?

I agree that pure angular often ends up much simpler and I'm already taking my first draft which was still manipulating a lot of HTML to make it have some structure with a model, etc.  If I can do the same for the placeholder insertion, that'd be cool too.

Thanks,

Kevin