Conditional add html attributes to element in directive template

5,253 views
Skip to first unread message

Ryan Zec

unread,
Jan 2, 2013, 1:57:43 PM1/2/13
to ang...@googlegroups.com
So I am building this grid directive and have it pretty much working.  One of the things I would really like to clean up is how I apply the sorting functionality.  Right now I add the ng-click to each column header whether or not that column is sortable (which is defined in the columnModel configuration).  Then inside the sort function is where I determine whether or not I should really sort.  I would like to be able to only add the ng-click functionality if the column is sortable in the first place (this would allow me to clean up the sort function code and I can see possible wanting to do this type of functionality in the future).  Is it possible to conditional add attributes similar to how ng-class adds classes conditional?

Joshua Miller

unread,
Jan 2, 2013, 4:18:04 PM1/2/13
to angular
Hi Ryan!

Are you looking to add it conditionally from a directive that is a parent to the column element or is the directive on the column element itself? Are you wanting to do it conditionally from markup or from a compile/link function? All of these are doable, but I need more info about your use case.

Josh


On Wed, Jan 2, 2013 at 10:57 AM, Ryan Zec <bas...@gmail.com> wrote:
So I am building this grid directive and have it pretty much working.  One of the things I would really like to clean up is how I apply the sorting functionality.  Right now I add the ng-click to each column header whether or not that column is sortable (which is defined in the columnModel configuration).  Then inside the sort function is where I determine whether or not I should really sort.  I would like to be able to only add the ng-click functionality if the column is sortable in the first place (this would allow me to clean up the sort function code and I can see possible wanting to do this type of functionality in the future).  Is it possible to conditional add attributes similar to how ng-class adds classes conditional?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

Tim Sweet

unread,
Jan 3, 2013, 1:21:01 AM1/3/13
to ang...@googlegroups.com
Hey Ryan,

Do you have your project up on github? Angular-UI has a grid directive which is upated regularly. Http://angular-ui.github.com/ng-grid. How about contributing to that project since its pretty well established already? Just a thought.

Cheers,
Tim Sweet

Ryan Zec

unread,
Jan 3, 2013, 8:37:00 AM1/3/13
to ang...@googlegroups.com
Joshua,

Right now it is part of 1 template string within the 1 directive.  I plan to move the template string to an external template once I get the base functionality working and plan on looking into breaking this up into multi directives.  Ideally I would like to be able to conditionally add the ng-click attribute from the markup (even if that means creating a new directive to do it).


Ryan

Ryan Zec

unread,
Jan 3, 2013, 9:04:38 AM1/3/13
to ang...@googlegroups.com
Tim,

Thanks for the suggestion but I do have my reasons for building this directive (along with a number of other directives and I am also building/going to build) myself.  The biggest is probably the fact that doing so will allow me to learn AngularJS a lot better than i could by just using a bunch of already created plugins.  I mean I do find these existing libraries great for a learn reference however I learn a lot more by building instead of just using.  Another big reason I am building my own set of directives is because the past several years of jQuery plugin use has lead me to the conclusion that whenever I start trying to use plugins, especially ones that deal with UI elements, most of the time I just end up rewriting them because modification is to hard and I end up writing them more efficiently for my use cases.  Maybe the AngularJS ecosystem will help with this issue but only time will tell for me (and there is a good chance we I have have to look at 3rd party plugins for my job and my job has more strict timelines then my personal project)  There are the occasional libraries that I do use like Angular-UI's event directive because there is really nothing I can do to make that better.  I also use jQuery UI's interaction plugins (drag, drop, resize) because I probably can't make it any better and I really don't care to much about the implementation details for those pieces of functionality.

Now I have looked at the ng-grid library and while it does look good I think the positives outweigh the negatives for me in writing my own set of directives. 


Thanks,
Ryan

Joshua Miller

unread,
Jan 3, 2013, 5:15:44 PM1/3/13
to angular
Hi Ryan!

A directive is the route I'd go too: http://plnkr.co/edit/cJ5lWK?p=preview. I also illustrated a few conditions so you can see the flexibility and power of using expressions with directives. This is highly contrived, but I'm sure it will illustrate the point. Also, ignore the bad coding in the controller - it was just convenience for this example as I don't know what you intend to run as a method.

There are many more ways to do this, depending on how much flexibility and power you need.

Josh


--
Reply all
Reply to author
Forward
0 new messages