1

I'm working on an isolated scope custom directive that has a few different states. Does it make sense to use ui-router/ui-view inside this directive in order to handle the states?

It's a "note widget" that lists notes. If there are no notes, it displays a message instead of the list that says they should add a note. If notes are being loaded, it shows that notes are being loaded. If a user adds a note by clicking the add I mentioned above or the + then the view is a textbox. So there is at least 4 different views.

My initial instinct is that it would be polluting the directive and giving it a hard dependency to ui-router and my application because it defines the states. Am I just over worried?

Mike Haas
  • 2,273
  • 3
  • 25
  • 30
  • 1
    Seems a bit overcomplicated to me. Why don't you just use ng-if and/or ng-show to conditionally : display message if 0 notes, display list if items > 0, display textbox and temporary hide list if the "+" button is hit. That said, it's the beauty of AngularJS to give you freedom in how you want to handle stuff. But personnaly I would go the other way, define my ui-router states, and attach directives if required in the states templates. – Christian Bonato Jul 10 '14 at 23:44
  • @Bonatoc That's what I would normally do, just use ng-if/ng-switch with $scope variables to control the state of the directive. Sometimes that gets kind of messy though and I don't really have a consistent way to control the state between different directives. Really what I'm asking is if there is a better pattern or more sophisticated way to control the state of individual directives. – Mike Haas Jul 11 '14 at 03:56

1 Answers1

1

I would tell it this way: yes, use the ui-router, but not for a directive - use it for your appliation. In fact, the best you can do is to read few blog posts and go through sample application to understand the principles. You'll soon realize, that there is no need to use the ui-router partially..

from The basics of using ui-router with AngularJS (by Joel Hooks)

...ui-router fully embraces the state-machine nature of a routing system. It allows you to define states, and transition your application to those states. The real win is that it allows you to decouple nested states, and do some very complicated layouts in an elegant way.

You need to think about your routing a bit differently, but once you get your head around the state-based approach, I think you will like it...

and here AngularJS State Management with ui-router (by Ben Schwartz)

...The most interesting thing about AngularJS's new router, isn't the router itself, but the state manager that comes with it. Instead of targeting a controller/view to render for a given url, you target a state. States are managed in a heirarchy providing inheritance of parent states and complex composition of page components, all the while remaining declarative in nature...

Here I put together all the links, up to date, targeting the sample example, the most interesting code snippet sample.js..

Summary, try to implement the ui-router on the application level. Directive could then by a conductor only, helping your users to navigate, to walk through among states...

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335