For posterity... I ended up enhancing the provider service so that it would listen for '$locationChangeSuccess' broadcasts. and, as Gordon suggested using the url to drive the CSS that is applied. I used $location.url() and not $state.current.name because ui-router does not detect use of the browser back button or when the url changes from a child state back to a parent state.
Updated Plunker here: http://plnkr.co/edit/1EikIA0tMcnO4W2sgeJy?p=preview On Thursday, April 3, 2014 10:58:29 AM UTC-7, Luis De Avila wrote: > > Hi Gordon, > > Thanks for the suggestion. I'll play around with that idea today. > > Here's a plunker of what I currently have hacked together. > I don't think my solution is very elegant or salable, I'm going to have a > lot of pages with edit panels. > > Thanks again for the feedback. > > Luis > > On Saturday, March 29, 2014 10:19:02 PM UTC-7, Gordon Bockus wrote: >> >> Hi Luis, >> On thing I've found refreshing about angular is state specific css class >> can just go in the template for that state. If you are reusing templates >> for various states, but need to apply different css one option would be to >> create a constant that has state.current.name -> css classes to apply, >> and then using a function to apply the state. >> >> getCls: function() { >> return STATE_CLS[$state.current.name]; >> }; >> >> If you have a more specific example of what you're trying to do ppl can >> answer your specific question. A plunker is always nice. >> >> Gordon >> >> On Friday, March 28, 2014 6:52:46 PM UTC-5, Luis De Avila wrote: >>> >>> Hi all, >>> >>> Anyone have a best practice or a recommendation for updating the css of >>> views as a user navigates though an app. >>> >>> Example, I have a list of items. User selects an item and clicks an edit >>> button. The item's edit page slides in from the side. >>> >>> At the moment I am using a service that has the css for each of the view >>> states.... when the list is full width, when the list is collapsed and the >>> edit page takes up 1/3 of the page, etc. >>> >>> What I don't like about this approach is that I call functions on the >>> service that set the value of a variable that gets references within >>> ng-class on the various pages. I'm sure other have had to solve this kinds >>> of scenario and am looking to some suggestions. >>> >>> I've thought about using service that listens to ui-router's state >>> change or view load events to trigger a search of the dom and change the >>> CSS that way. Or maybe there is a ui-router feature that can help with this? >>> >>> Thanks! >>> >>> Luis >>> >> -- 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.
