如何在 JS 中直接调用控制器内的路由配置，而不是从 html 单击 href

Question

我在 AngularJS 中的路由和单页应用程序的概念上相对是一个新手。因此，我被困住了，非常感谢您帮助解决我的问题。

背景

我有一个“产品列表”页面，其中列出了 ng-repeat 循环中的所有产品。当我单击其中一个产品 link 时，应用程序通过 href 调用 [=16] 为该 'id' 加载“详细信息”页面（页面 'Products list' (SPA) 的扩展） =]

<a href="{{id}}/Details" class="button"> Details

为了启用到 'Details' 页面的路由，我们创建了一个 app.config 如下

in Productslist.js
-------

$routeProvider
    .when("/:id/Details",{ templateUrl : "../ProductsList/Details" , controller :})
    .otherwise({
        templateUrl : "/"
    });

目前的流程工作正常，当我在页面 'ProductsList' 上并单击 html 中的 'Details' 按钮时，我可以打开 'Details' 页面] 显示的任何产品。

如果相关，URL 显示ex: www.abc.com/list/4/Details 并且id = 4 的产品详细信息显示在页面上。

什么不起作用/我需要什么

现在，我想从另一个第三页“X”获取产品 ID，然后直接导航到产品详细信息页面（无需单击页面 A 中的“详细信息”按钮）。

由于此页面的模块最初是在“ProductsList”页面中创建的，因此我从页面 X 获取 'id' 值到 ProductList.js 并且我想设置 URL 如下打开 'Details' 页面。

if(fromPageX == 'true')
{
var x = id+"/Details";
location.href = x;   // dont wait on page productsList.html, but open "Details" page
}

基本上我想从 .js 文件中的控制器调用“路由”功能，而不是从 .html 文件（单击）

浏览器上的 URL 正确显示：www.abc.com/A/4/Details

但是我收到 404 - 页面未找到错误，因为它没有通过路由配置。我尝试了 Window.location.href，或各种线程中的其他建议，但我仍然无法成功加载 'Details' 页面。

我正在寻找的这种情况在 AngularJS
我做错了什么。

在此先感谢您的支持！

Answer 1

不确定页面 X 的逻辑发生在哪里，但您至少有 2 个选择。您可以在页面 X 的路由的 resolve 中捕获它，或者您可以在页面 X 的控制器中捕获它。在解析中捕获它会更好，因为它不会首先尝试加载页面 X 控制器等.

解析方式。 在页面 X .js 文件中，添加一个解析块，该块将在路由解析之前捕获 ID 并重定向。

            $routeProvider
            .when("PAGE_X/:id",{ 
                templateUrl : "../ProductsList/PAGE_X" , 
                controller : 'pageXController',
                resolve: {
                    redirect: ['$q', '$location', '$routeParams' function($q, $location, $routeParams) {
                        var deferred = $q.defer();
                        if ($routeParams.id) {
                            $location.path("/A/"+ $routeParams.id + "/Details")
                            deferred.resolve();
                        } else deferred.resolve();
                        return deferred.promise;
                    }]
            }
            })
            .otherwise({
                templateUrl : "/"
            });

重定向方式 这将进入 PAGE_X 控制器，但不是 window.location 等，而是使用 angular $location （确保注入 $location 作为依赖项）方法 - https://docs.angularjs.org/guide/$location

if(fromPageX == 'true')
{
var x = "A/" + id+"/Details";
$location.path(x);
}

如何在 JS 中直接调用控制器内的路由配置，而不是从 html 单击 href

How to call a route config inside a controller in JS directly rather than from html a href on-click

javascript

routes

angularjs