如何从 json 动态构建菜单?
How to dynamically build a menu from json?
现在我的主菜单html正在手工编辑。但我想从 json 动态创建主菜单。如何做到这一点?
我有以下 app.js:
var app = angular.module('MyApp', ['ngRoute', 'oc.lazyLoad']);
app.config(function($routeProvider, $locationProvider){
var routeDef = function (name) {
return {
templateUrl: 'partials/' + name + '.htm',
controller: name.charAt(0).toUpperCase() + name.slice(1) + 'Ctrl',
resolve: {
loader: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('controllers/' + name + '.js');
}]
}
};
};
$routeProvider.
when('/home', routeDef('home')).
when('/controller1', routeDef('controller1')).
when('/controller2', routeDef('controller2')).
otherwise({ redirectTo: '/home' });
// $locationProvider.html5Mode(true);
});
app.controller('NavCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'index';
return page === currentRoute ? 'active' : '';
};
}]);
对于 html:
<html>
...
<body ng-controller="MyApp">
...
<ul class="nav nav-pills" ng-controller="NavCtrl">
<li role="presentation" ng-class="navClass('home')"><a href="#/home">Home</a></li>
<li role="presentation" ng-class="navClass('controller1')"><a href="#/controller1">Controller1</a></li>
<li role="presentation" ng-class="navClass('controller2')"><a href="#/controller2">Controller2</a></li>
</ul>
...
<div ng-view></div>
...
</body>
</html>
是的,就在这里:
function SidebarLoader($http) {
this.getMenu = getMenu;
////////////////
function getMenu(onReady, onError) {
var menuJson = '/app/json/sidebar.menu.json',
menuURL = menuJson + '?v=' + (new Date().getTime()); // jumps cache
onError = onError || function() { alert('Failure loading menu'); };
$http
.get(menuURL)
.success(onReady)
.error(onError);
}
}
控制器:
SidebarLoader.getMenu(sidebarReady);
function sidebarReady(items) {
$scope.menuItems = items;
}
jade/html:
li(ng-repeat='item in menuItems | limitTo: 3 ', ng-class="{'dropdown': item.submenu}", dropdown="!!item.submenu")
现在我的主菜单html正在手工编辑。但我想从 json 动态创建主菜单。如何做到这一点?
我有以下 app.js:
var app = angular.module('MyApp', ['ngRoute', 'oc.lazyLoad']);
app.config(function($routeProvider, $locationProvider){
var routeDef = function (name) {
return {
templateUrl: 'partials/' + name + '.htm',
controller: name.charAt(0).toUpperCase() + name.slice(1) + 'Ctrl',
resolve: {
loader: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('controllers/' + name + '.js');
}]
}
};
};
$routeProvider.
when('/home', routeDef('home')).
when('/controller1', routeDef('controller1')).
when('/controller2', routeDef('controller2')).
otherwise({ redirectTo: '/home' });
// $locationProvider.html5Mode(true);
});
app.controller('NavCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'index';
return page === currentRoute ? 'active' : '';
};
}]);
对于 html:
<html>
...
<body ng-controller="MyApp">
...
<ul class="nav nav-pills" ng-controller="NavCtrl">
<li role="presentation" ng-class="navClass('home')"><a href="#/home">Home</a></li>
<li role="presentation" ng-class="navClass('controller1')"><a href="#/controller1">Controller1</a></li>
<li role="presentation" ng-class="navClass('controller2')"><a href="#/controller2">Controller2</a></li>
</ul>
...
<div ng-view></div>
...
</body>
</html>
是的,就在这里:
function SidebarLoader($http) {
this.getMenu = getMenu;
////////////////
function getMenu(onReady, onError) {
var menuJson = '/app/json/sidebar.menu.json',
menuURL = menuJson + '?v=' + (new Date().getTime()); // jumps cache
onError = onError || function() { alert('Failure loading menu'); };
$http
.get(menuURL)
.success(onReady)
.error(onError);
}
}
控制器:
SidebarLoader.getMenu(sidebarReady);
function sidebarReady(items) {
$scope.menuItems = items;
}
jade/html:
li(ng-repeat='item in menuItems | limitTo: 3 ', ng-class="{'dropdown': item.submenu}", dropdown="!!item.submenu")