Question

我定义了一些导航，如果路线不可用或存在许可，我想要一个按钮存在。我已经完成了权限位，并且工作正常，但现在我开始根据配置排除页面。理想情况下，我需要一个指令，如route-depend，它接受路径并查询路由器以查看它是否存在，以及它是否具有权限。

所以我有以下内容：

app.config([ "$routeProvider", function($routeProvider) {
    $routeProvider
    .when("/404", {
        templateUrl : "/pages/404.php"
    }).when("/noauth", {
        templateUrl : "/pages/noauth.php"
    }).when("/home", {
        templateUrl : "/pages/homepage.php"
    }).when("/about", {
        templateUrl : "/pages/about.php",
        permission : "logged-in"
    }).otherwise({
        redirectTo : "/404"
    });
} ]);

我设置了导航链接（与按钮相同）

<li data-has-permission="logged-in" >
    <a href="#" data-ng-click="setActiveTab('about')">ABOUT</a>
</li>

我想做类似的事情：

<li data-route-depend="/newpage">
    <a href="#" data-ng-click="setActiveTab('newpage')">NEW PAGE</a>
</li>

在我的示例中，这意味着data-route-depend将失败（并将元素隐藏为我的has-permission），因为未定义路由（除了重定向到404页面之外）

我查看了$routeProvider的文档，但似乎并没有多少。它指的是$route的例子，并且似乎没有像我所追求的那样。

我拼凑了这个：

app.directive('routeDepend', [ "$route", function($route) {
    return {
        link : function(scope, element, attrs) {
            if (!(typeof attrs.routeDepend == "string")) {
                throw 'route-depend value must be a string'
            }
            var value = attrs.routeDepend.trim();

            function toggleVisibilityBasedOnRoute() {
                logger($route.routes); // Shows as object of objects
                for (var route in $route.routes) {
                    if ($route.routes.hasOwnProperty(route)) {
                        logger(typeof route); // shows as a string??
                        logger(route);
                        logger("Checking '"+attrs.routeDepend+"' against '"+route.originalPath+"'"); // undefined originalPath
                        // check route.permission
                    }
                }
            }

            toggleVisibilityBasedOnRoute();
            scope.$on('permissionsChanged', toggleVisibilityBasedOnRoute);
        }
    };
} ]);

但正如你从评论中看到的那样，事情并没有像我期待的那样得到解决。

我做错了什么，怎样才能让它做我想做的事？

Answer 1

啊，嗯。我的循环错了。它本应该是：

for (routeName in $route.routes) {
    if ($route.routes.hasOwnProperty(routeName)) {
        route = $route.routes[routeName];

然后其余的都按预期工作。

Answer 2

您已完成配置部分。而不是查询路线，只需使用现有的配置部分来显示/隐藏链接

根据您的配置，创建一个功能/服务，告诉您是否允许用户访问路径。

然后，如果您只想在页面加载期间检查该功能，请在ng-init中调用该功能，然后决定该链接的可见性。

或者在ng-if ng-show ng-hide中调用它，以防您想要持续监控它。

角度路线：测试路线是否存在

2 个答案: