【问题标题】:AngularJS How to get additional routes parameterAngularJS如何获取额外的路由参数
【发布时间】:2023-04-02 01:42:01
【问题描述】:

有没有办法向 $routeProvider 添加额外的参数并在指令中检索这些参数?我需要这个,因为该变量是特定于页面的。

我想像这样向 routeprovider 添加一个参数 pageName:

$routeProvider
        .when('/home',
        {
            controller: 'homeController',
            templateUrl: '_templates/home.html',
            pageName: 'home'
        })

并在这样的指令中使用这个额外的参数

directives.dirPagename = ['$route', '$routeParams', function($route, $routeParams) {
    return {
        restrict: 'ECA',
        template: 'test',
        link: function (scope, elem, attrs) {
            console.log($route);
            console.log($routeParams);
        }
    }
 }]

当我记录 $route 并在 google webdeveloper 工具中检查它时,pageName 参数有几层深。

Object {routes: Object, reload: function}
    current: D
       $$route: Object
            controller: "homeController"
            **pageName: "home"**

有没有办法直接获取这个变量或者这完全是错误的方法?

更新:

您可以通过以下方式获取路由中的变量 var pageName = $route.routes[$location.$$path].pageName;

【问题讨论】:

    标签: angularjs angularjs-directive angularjs-routing


    【解决方案1】:

    您可以在 $route.routes[uri] 中找到信息。

    以我的viewRouter服务为例分享给大家:

    var uaViewRouter = angular.module('ua.ViewRouter', []);
    
    uaViewRouter.service('uaViewProvider', function($route, $location, uaContext){
        this.redirectToView = function(viewName){
            url = undefined;
            for(var route in $route.routes){
                if ($route.routes[route].view == viewName){
                    url = route;
                }
            }
            if(url == undefined){
                throw("uaViewProvider: Undefined view " + viewName);
            }
            if($route.routes[url].enrichment == true){
                url = url.replace(":operatorId", uaContext.operator.get().id);
                url = url.replace(":productId", uaContext.product.get().id);
            }
            $location.path(url);
        };
    });
    
    uaViewRouter.run(function($rootScope, uaViewProvider) {
        $rootScope.uaViewProvider = {};
        $rootScope.uaViewProvider.redirectToView = function(viewName) {
            uaViewProvider.redirectToView(viewName);
        };
    });
    

    路由声明示例:

    uaApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/login', {
                templateUrl: 'app/login/login.tpl.html',
                loginRequired: false,
                view: 'login'
            }).
    ...
    

    您可以通过调用在您的控制器或服务中使用它:

    uaViewProvider.redirectToView('login');
    

    或者在模板中:

    <a href="" ng-click="uaViewProvider.redirectToView('login')">Click to login</a>
    

    【讨论】:

    • 感谢您的回答,我得到了正确的 var pageName = $route.routes[$location.$$path].pageName;
    猜你喜欢
    • 1970-01-01
    • 2018-11-12
    • 1970-01-01
    • 1970-01-01
    • 2014-10-29
    • 1970-01-01
    • 1970-01-01
    • 2016-01-27
    • 1970-01-01
    相关资源
    最近更新 更多