Support nested elements containing 'ui-sref'

[sebnilsson]

Stopped event-propagation in the click-handler for uiSref-directive to support nested tags with ui-sref-attribute.

<div ui-sref="root">
    Root-item description
    <div ui-sref="root.child">
        Child-detail
    </div>
</div>

Clicking the "Child-details"-link will fire the root.child-sref as expected, but also the root-sref immediately after, resulting in the root-state always being shown.

[timkindberg]

I'm curious if, while good for this scenario, it may create problems for other scenarios. I'm wondering if we need to handle it in a different way... like it seems in a lot of cases you want your events to bubble, so we'd essentially be turning that off for good and I just can't tell if that's going to be ok.

[sebnilsson]

That's the beautiful thing about Pull-requests, to get feedback on the feedback... now that you mention it, it may just have solved my specific case.

Is there another way to flag the click as sref-nav-executing (or something), but then "release" that status when all ui-sref-listeners are done triggered, so you can click them again?

[timkindberg]

Yeah its almost as if we need the event to be like:

1. ok what dom element did I originate in? Text node, cool.
2. Go up one.
3. ok where am I now? On a ui-sref, ok this is my ui-sref, I will ignore all others. // set some flag?
4. Go up, go up, go up, etc. Ok where am I now? On another ui-sref, ok I'll just ignore this one, because I already hit one.

@sebnilsson Pretty sure that's what you were thinking too.

[timkindberg]

I don't follow but feel free to implement a solution and we can review.

[sebnilsson]

Sorry for the previous, confusing comment. I'm happy with this Pull Request now :)

[timkindberg]

Oh I was confused because I'm on mobile which doesn't show that you've updated the code. So now that I reviewed the code I agree it seems much better now. Just need @nateabele to review.

[nateabele]

Alternatively:

    <div ui-sref="root.child" ng-click="$event.stopPropagation()">
        Child-detail
    </div>

Problem solved. Bonus: we're saved from the tedium & risk inherent in trying to guess at every future use case of everyone who ever uses this library. 🍻

[sebnilsson]

That is of course a lot simpler, but shouldn't it be the default behavior? Maybe it's just my, so far, limited use of the framework, but is there any scenario when you actually want an ui-sref to fire multiple times inside nested elements?

[nateabele]

The inherent assumption here is that order of priority is deterministic and fixed. While it is likely that what you mention above is often the case, (a) it would be significantly harder for people to work around the behavior in counter-examples than it would for you to use the solution I've suggested, and (b) I can't imagine that people are nesting uiSref directives terribly often in the first place.

[sebnilsson]

I trust your judgement, but intuitively it feels like an ui-sref-directive should act like an <a href>-tag, where the first "catching" a-tag wins the click.

[timkindberg]

@sebnilsson totally see your point, but also agree with @nateabele. How often do people nest anchor tags, I'm not sure I've ever done that. Don't think we don't appreciate your contributions though, sometimes things just need to be sat on for a while before we realize the right path forward.

[sebnilsson]

I totally agree, just trying to bring the problem to the surface.

As for when you use nested anchor-tags: we use it to show larger boxes of company-info, where clicking the whole box goes into to the company-page, but clicking individual small icons inside the box gets you to the specific sub-area of the company-page, like ratings, videos, images and so on.

Hope this whole thing has stimulated some thought around the problem, at least :)

[nateabele]

@sebnilsson Indeed. I think it warrants a note in the FAQ, explaining how the event cascade can be manipulated.

[timkindberg]

Will do.