Question

我正在使用asp.net mvc4和Angular JS（从John Papa的HotTowel.angular.Breeze SPA开始）。我在sidebar.html中添加了一个下拉菜单，并且还为config.route.js添加了相应的路由。

我发现棘手的部分是将下拉菜单正确连接到Angular路线。

这个设置大部分都有效，只有当我点击＆＃34; MR报告＆＃34;在下面的下拉菜单中，它会立即开出一条路线（例如，当我将鼠标悬停在MR报告上时，它会显示链接＆＃34; localhost：49479 / index.html＃＆＃34;。换句话说，＆＃34; MR Reports＆＃34;应该是一个下拉菜单，在我选择一个下拉菜单项之前不会触发路由更改。

我不确定更改是否应该在config.route.js或sidebar.html代码中。

更新：我假设我可以使用Angular ngHref指令（类似ng-href="#{{r.url}}"）来动态排除顶层href标记（如果有子菜单）。也许我也可以使用ng-if="r.config.sub"作为指南。

以下是config.route.js的内容（请注意子菜单的＆＃34; sub：＆＃34; 部分）：

(function () {
  'use strict';

var app = angular.module('app');

// Collect the routes
app.constant('routes', getRoutes());

// Configure the routes and route resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {

    routes.forEach(function (r) {
        $routeProvider.when(r.url, r.config);
    });
    $routeProvider.otherwise({ redirectTo: '/' });
}

// Define the routes 
function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-dashboard"></i> Dashboard'
                }
            }
        }, {
            url: '/admin',
            config: {
                title: 'admin',
                templateUrl: 'app/admin/admin.html',
                settings: {
                    nav: 2,
                    content: '<i class="fa fa-lock"></i> Admin'
                }
            }
        },
        {
            url: '/testgrid',
            config: {
                title: 'grids',
                templateUrl: 'app/testgrid/testgrid.html',
                settings: {
                    nav: 3,
                    content: '<i class="fa fa-globe"></i> TestGrid'
                }
            }
        },
        {                
            config: {
                title: 'reports',
                templateUrl: 'app/testgrid/testgrid.html',
                settings: {
                    nav: 4,
                    content: '<i class="fa fa-plus-square "></i> MR Reports <b class="caret"></b>'
                },
                sub: [
                {
                    url: '/testgrid',
                    title: 'reports1',
                    templateUrl: 'app/testgrid/testgrid.html',
                    settings: {
                        content: 'TestGrid'
                    }
                },
                {
                    url: '/admin',
                    title: 'Admin2',
                    templateUrl: 'app/admin/admin.html',
                    settings: {
                        content: 'Admin2'
                    }
                }
                ]
            },
        }           
    ];
 }
})();

我的sidebar.html定义为：

<div data-cc-sidebar data-ng-controller="sidebar as vm">
<div class="sidebar-filler"></div>
<div class="sidebar-dropdown"><a href="#">Menu</a></div>
<div class="sidebar-inner">
    <div class="sidebar-widget">
    </div>        

    <ul class="navi">                     
        <li class="nlightblue fade-selection-animation"                 
            ng-class="{dropdown: r.config.sub}" 
            data-ng-repeat="r in vm.navRoutes">

            <a href="#{{r.url}}" data-ng-bind-html="r.config.settings.content" ng-class="{'dropdown-toggle': r.config.sub}" data-ng-class="vm.isCurrent(r)" data-toggle="dropdown" ></a>
            <ul ng-if="r.config.sub" class="dropdown-menu">
                <li ng-repeat="submenu in r.config.sub">
                    <a href="#{{submenu.url}}" data-ng-bind-html="submenu.settings.content"></a>
                </li>

            </ul>
        </li>                                                                 
    </ul>         
</div>

Answer 1

我对我的黑客并不感到疯狂，但最终还是起作用了。我使用一个ng-if呈现非下拉菜单项的href链接，另一个ng-if到 EXCLUDE 下拉列表的href标记。

在getRoutes（）函数中，我在下拉列表的顶层排除了url:属性。

 <ul class="navi">                   
        <li class="nlightblue fade-selection-animation"                
            ng-class="{dropdown: r.config.sub}"
            data-ng-repeat="r in vm.navRoutes">

            <a ng-if="r.url" href="#{{r.url}}" data-ng-bind-html="r.config.settings.content"
                ng-class="{'dropdown-toggle': r.config.sub}"
                data-ng-class="vm.isCurrent(r)"
                data-toggle="dropdown" ></a>
            <a ng-if="r.config.sub" data-ng-bind-html="r.config.settings.content"
                ng-class="{'dropdown-toggle': r.config.sub}"
                data-ng-class="vm.isCurrent(r)"
                data-toggle="dropdown" ></a>

            <ul ng-if="r.config.sub" class="dropdown-menu">
                <li ng-repeat="submenu in r.config.sub">
                    <a href="#{{submenu.url}}" data-ng-bind-html="submenu.settings.content"></a>
                </li>

            </ul>
        </li>

config.route.js功能：

 function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-dashboard"></i> Dashboard'
                }
            }
        }, {
            url: '/admin',
            config: {
                title: 'admin',
                templateUrl: 'app/admin/admin.html',
                settings: {
                    nav: 2,
                    content: '<i class="fa fa-lock"></i> Admin'
                }
            }
        },
        {
            url: '/testgrid',
            config: {
                title: 'grids',
                templateUrl: 'app/testgrid/testgrid.html',
                settings: {
                    nav: 3,
                    content: '<i class="fa fa-globe"></i> TestGrid'
                }
            }
        },
        {   // Exclude url: at this top level
            config: {
                title: 'reports',                    
                settings: {
                    nav: 4,
                    content: '<i class="fa fa-plus-square "></i> MR Reports <b class="caret"></b>'
                },
                sub: [
                {
                    url: '/testgrid',
                    title: 'reports1',
                    templateUrl: 'app/testgrid/testgrid.html',
                    settings: {
                        content: 'TestGrid'
                    }
                },
                {
                    url: '/admin',
                    title: 'Admin2',
                    templateUrl: 'app/admin/admin.html',
                    settings: {
                        content: 'Admin2'
                    }
                }
                ]
            },
        }           
    ];
}

使用Angular路线连接导航菜单

1 个答案: