Angular $ state.go()在IE中保持重定向到索引

时间:2022-08-21 12:05:47

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.

我正在使用angular-ui-router来处理我的应用程序中的导航。调用$ state.go([州名])在Chrome中完全正常,但在IE中(使用Edge)调用导航到正确的视图片刻,然后立即重定向到'/'。我也在使用angular bootstrap手风琴指令。标题内容包含我尝试将导航操作附加到的

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.

我从主app配置块中完全删除了$ urlRouterProvider.otherwise('/')语句。控制台中没有错误。我已经在我们的实时Azure租户和localhost上测试了这一点。相同的结果; IE在实时环境和localhost中失败,而Chrome在两种情况下都能正常工作。单步执行angular-ui-router.js并不表示任何捕获块被击中;一切似乎都在那里正常工作。

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?

我希望我可以发布一个实例,但代码是在NDA下。有没有人知道$ state和IE的浏览器不兼容问题?任何其他可能有用的信息?

I've been scouring the github / * / 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 :]).

在过去的3个小时里,我一直在搜索github / * / google,我的头部因为撞墙而感到疼痛(加上很少的睡眠和大量的咖啡因:])。

Thanks for your help

谢谢你的帮助

1 个解决方案

#1


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.

angular / bootstrap手风琴指令通过将这些内容包装在标签内,修改 内的标记。当使用$ state.go()或尝试以编程方式通过ui-router服务进行导航时, 标签将因其href属性而窃取导航。好像我应该早点抓住这个。

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.

角度引导指令被编写为模块化且易于使用;在这种情况下,通过避免内置的导航机制(例如标签)可以避免跨库污染,特别是在没有实际发生超链接的情况下。我没有使用标签,而是通过调整的引导程序代码创建了自己的指令,因此 的内容用span填充。

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>

#1


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.

angular / bootstrap手风琴指令通过将这些内容包装在标签内,修改 内的标记。当使用$ state.go()或尝试以编程方式通过ui-router服务进行导航时, 标签将因其href属性而窃取导航。好像我应该早点抓住这个。

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.

角度引导指令被编写为模块化且易于使用;在这种情况下,通过避免内置的导航机制(例如标签)可以避免跨库污染,特别是在没有实际发生超链接的情况下。我没有使用标签,而是通过调整的引导程序代码创建了自己的指令,因此 的内容用span填充。

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>