0
나는 asp.net mvc4 및 Angular JS (John Papa의 HotTowel.angular.Breeze SPA에서 시작)와 함께 작업하고 있습니다. sidebar.html에 드롭 다운 메뉴를 추가하고 config.route.js에 적절한 경로를 추가했습니다.각진 경로로 nav 메뉴 연결하기
난이도가 높은 부분은 드롭 다운 메뉴를 각도 경로에 올바르게 연결하는 것입니다.
아래의 "MR 보고서"드롭 다운 메뉴를 클릭하면 경로가 바로 실행됩니다 (예 : MR 보고서 위로 마우스를 가져 가면 "localhost : 49479/index.html # ". 즉,"MR 보고서 "는 드롭 다운 메뉴 여야하며 드롭 다운 메뉴 항목을 선택할 때까지 경로가 변경되지 않습니다.
변경 사항을 구성해야하는지 잘 모르겠습니다. .route.js 또는 sidebar.html 코드
업데이트 :. 내가 하위 메뉴가 있다면 동적으로 최상위 HREF 태그를 제외, 각 ngHref 지시어, ng-href="#{{r.url}}" 같은 것을 사용할 수 있으리라 믿고있어 . 아마도 ng-if="r.config.sub"을 가이드로 사용할 수 있습니다. 여기
(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>
사이드 바 - 드롭 다운 밖으로 "#"을 가져 가라. –
@CorySilva - 드롭 다운 항목에 href 링크를'localhost : 49474/admin'로 렌더링하기 때문에 작동하지 않습니다. SmartAdmin 부트 스트랩 템플리트는 아주 잘 보입니다. 잘 이해하지 못하기 때문에 명확성을 위해 예제를 게시하겠습니다. –