MVC路由的AngularJs路由问题答案

【问题标题】：AngularJs routing issue with MVC routingMVC路由的AngularJs路由问题
【发布时间】：2016-11-09 09:47:38
【问题描述】：

我正在开发 MVC 应用程序，我需要在 angularjS 中构建一些模块。所以现在我也有角度客户端路由以及 MVC 路由。

现在我遇到了一个问题，当页面被重定向到使用 MVC 路由时，如果我点击 MVC 页面，它就可以工作了。

例如：登录后，我重定向到 Listing 视图，该视图工作正常。现在在菜单上点击/Listing 工作正常。

现在，如果我打开任何 angularjs 路由页面，那么它会打开该页面。现在，当我在 angularjs 页面上时，如果我单击 /Listing 所在的同一菜单链接..我将被重定向到默认的 angularjs 路由。

如何同时处理 MVC 和 angularjs 路由？

例如：菜单链接如下

$("#lnkAddUser").attr("href", serverURL + "#/registeruser");
            $("#lnkTreqHome").attr("href", serverURL + "Listing");

'#'链接用于angualr页面，其他链接用于mvc页面

角度路由如下

angularFormsApp.config(["$routeProvider", "$locationProvider",
    function ($routeProvider, $locationProvider) {
        $routeProvider.caseInsensitiveMatch = true;
        $routeProvider
            .when("/account/index", {
                title: "Login",
                templateUrl: window.serverURL+"app/Login/loginTemplate.html",
                controller: "loginController"
            })
            .when("/Registeruser", {
                title: "New External User Setup",
                templateUrl: window.serverURL + "app/RegisterUser/registeruserTemplate.html",
                controller: "RegisterUserController"
            })
            .otherwise({ redirectTo: "/account/index" });

        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true
        });
        //$locationProvider.html5Mode(true);

    }]);

现在，如果我在 MVC 页面上并单击 Angular 页面，它正在工作.. 但是当我在 Angular 页面上并单击 MVC 页面时，它会重定向到 otherwise 页面

【问题讨论】：

遇到问题时有任何示例代码吗？
我已经更新了代码
因为你的默认路由点否则（{ redirectTo: "/account/index" });
但是当我在 MVC 页面上并且如果我再次点击 MVC 页面则没有任何问题
这是因为html5Mode 的工作原理。设计第 3 方 ui-router 的人写了一个很好的指南，介绍如何配置各种服务器来处理这个问题。 github.com/angular-ui/ui-router/wiki/…

标签： angularjs asp.net-mvc

【解决方案1】：

您可以创建自定义装饰器指令并将其应用于所有超链接

<a href="/someaction" to-mvc-link/>

并像这样实现toMvcLink 指令

return {
            restrict: 'A',
            scope: true,
            link: function (scope, element, attrs) {                  

                element.bind('click', function (event) {

                        document.location.href = attrs.href;

                });
            }
        }

【讨论】：