ui-router: best practice for updating css of states/views?

[Luis De Avila]

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

[Gordon Bockus]

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

[Luis De Avila]

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

[Luis De Avila]

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