feat(route) prototyping a new route checking directive

[ProLoser]

In response to #348

This is just a WIP, DO NOT MERGE YET

[sudhakar]

attrs.uiRoute evaluates to false all the time. I guess its because its getting treated as directive attribute.

[ProLoser]

Hmm... you're right, but it's only if you use {{}} and even if you put text OUTSIDE of the brackets it's still undefined initially. So... why?

[ProLoser]

The only way around it I can think of is elm.attr(attrs.$attr.uiRoute) instead but this won't work if used as a class. I have NO idea why it's undefined.

[sudhakar]

Quickly groked ng-href directive. Even there, they are only observing the change on ng-href attr. In our case attrs.ngHref is available because we have set priority to 100.

Is it something to do with uiRoute and its expression are treated separately but with same priority 100. then in tat case order of execution is unknown (this is a wild wild guess..)

[ajoslin]

probably should restrict A

[ProLoser]

@sudhakar and @ajoslin thanks for your help, this is finally ready to go!

[sudhakar]

@ProLoser Looks good to me & much cleaner than my initial proposal..

[ajoslin]

Landed in 0f65bd9

[Narretz]

What does it do exactly? Are there docs for it?

[ProLoser]

Not really lol. I should expand the docblock. I was going to add a demo when I push the new build.

@Narretz Want to help me out an open a PR?

Here's basically how it works:

1. Put ui-route where you want to do something depending on what the current route is (such as setting an active class on a nav link or hiding something)
2. Declare a route-match pattern
3. [optional] Specify an ng-model to store the boolean into, otherwise it will store the boolean into $uiRoute
4. Use this boolean to perform your behavior: <a ng-class="{active:$uiRoute}"> or <div ng-hide="$uiRoute">
   • $uiRoute (or your specified model) is added to the scope and can be accessed from children

Declaring a route-match pattern

ui-route
Support regex and {{}}

<li ui-route="/dashboard">
or
<li ui-route="/user/[0-9]*">
or
<li ng-repeat="tab in tabs" ui-route="/{{tab}}">
or
<li ng-repeat="tab in tabs" ui-route="/{{tab}}(/[0-9]*)?">

ng-href
Supports {{}} statically

<a ng-href="/dashboard" ui-route>
or
<a ng-href="/user/{{userId}}" ui-route>

href
Static only

<a href="/dashboard" ui-route>

Working with the flag

<li ui-route="/dashboard" ng-class="{active:$uiRoute}">
  <a href="/dashboard">Dash</a>
  <ul>
    <li ui-route="/dashboard/stats" ng-model="isStatsRoute">
     <div ng-show="isStatsRoute && $uiRoute">

Yes it's a shitty example

[ProLoser]

@joseym Again, I'm not sure how much you're willing to take on, but if you are willing to help me out, The above comment ^^ needs to be turned into an open PR for the demo page that we can merge in once we push v0.4.0

It does not need to have an updated version of angular-ui in the PR as that will be changed already.

[joseym]

Sure, this is great.