Angular $state.go() keeps redirecting to index in IE

Question

I am using angular-ui-router to handle navigation within my app. Calling $state.go([state name]) works perfectly fine in Chrome but in IE (using Edge) that call navigates to the correct view for a few moments then redirects right away to '/'. I am also using the angular bootstrap accordion directive. The header contents contains the <span> that I am trying to attach my navigation action to.

I completely removed the $urlRouterProvider.otherwise('/') statement from the main app config block. No errors are getting thrown in the console. I've tested this both in our live Azure tenant as well as on localhost. Same results; IE fails in a live environment and on localhost whereas Chrome works in both scenarios. Stepping through angular-ui-router.js doesn't surface any catch blocks getting hit; everything appears to be working normally there.

I wish I could post a live example but the code is under an NDA. Does anyone know of a browser incompatibility issue around $state and IE? Any other information that might be helpful?

I've been scouring the github / stackoverflow / google for the past 3 hours and my head is getting sore from banging it against the wall (plus little sleep and lots of caffeine :]).

Thanks for your help

Answer 1

The angular/bootstrap accordion directive modifies my markup inside of <accordion-heading>, by wrapping those contents inside of an <a href> tag. When using $state.go(), or trying to navigate via the ui-router service programatically, the <a> tag will steal the navigation due to its href attribute. Seems like I should have caught this earlier.

The angular bootstrap directives are written to be modular and easy to use; cross-library contamination can be avoided in this case by avoiding built-in navigation mechanisms such as the <a> tag, particularly when there is no actual hyperlinking taking place. Rather than an <a> tag, I have created my own directive out of the tweaked bootstrap code, so that the contents of the <accordion-header> are wrapped with a span instead.

My code before the accordion directive manipulation

<!-- inside of a ng-repeat-->
<accordion>

    <!-- code... -->

    <accordion-heading>

        <span>{{item.Title}}</span>
        <span ng-click="edit(item)"></span>

    </accordion-heading>

    <!-- code... -->

</accordion>

The code after the accordion directive manipulation (note the <a> tag).

<div class="panel-heading">
    <h4 class="panel-title">

        <!-- here is the culprit -->
        <a href="" 
            class="accordion-toggle" 
            ng-click="toggleOpen()" 
            accordion-transclude="heading">

            <span ng-click="editGroup(group)"></span>
        </a>
    </h4>
</div>