Question

我使用spring boot和AngularJS创建一个网站，有一个动态创建的侧边菜单，每个菜单项代表一个人。当用户单击菜单项时，应显示该特定菜单项的人员的简档。我已经为配置文件创建了一个模板页面，我想知道在同一个配置文件页面中使用单击菜单项中人员详细信息的机制是什么？

以下是动态菜单的代码

 <md-list>                                
    <a ng-repeat="x in menuItems" href="{{x.href}}">{{x.name}}</a>
 </md-list>

menuItems数组

$scope.menuItems = [ {href: '#/menu1', name: "Menu Item 1"},
                     {href: '#/menu2', name: "Menu Item 2"},
                     {href: '#/menu3', name: "Menu Item 3"},
                     {href: '#/menu4', name: "Menu Item 4"},
                     {href: '#/menu5', name: "Menu Item 5"} ];

Angularjs路线提供者

app.config(function ($routeProvider) {
    $routeProvider
            .when("/menu1", {
                templateUrl: "template.html"
            })
            .when("/menu2", {
                templateUrl: "template.html"
            })
            .when("/menu3", {
                templateUrl: "template.html"
            })
            .when("/menu4", {
                templateUrl: "template.html"
            })
            .when("/menu5", {
                templateUrl: "template.html"
            });
})

Answer 1

您可以在$ routeProvider中使用app.config(function ($routeProvider) { $routeProvider .when("/menu1", { templateUrl: "template.html" controller: "ProfilePageController" resolve: { profile: function(ProfileService) { return ProfileService.getProfile(1) } } }) .when("/menu2", { templateUrl: "template.html" controller: "ProfilePageController" resolve: { profile: function(ProfileService) { return ProfileService.getProfile(2) } } }) .when("/menu3", { templateUrl: "template.html" controller: "ProfilePageController" resolve: { profile: function(ProfileService) { return ProfileService.getProfile(3) } } }); })属性。

app.factory("ProfileService", function() {
    return {
        getProfile: function(id) {
            // Fetch the profile
            return profile;
        }
    }
});

然后在您的服务中：

app.controller("ProfilePageController", function (profile) {
   $scope.profile = profile; 
});

现在在你的控制器中你需要注入决心：

{{1}}

Answer 2

但这不是ui-router这是ngRoute你必须改变路线是一条路线而不是你在这里疯了。

 $routeProvider
    .when("/menu/:id", { // :id => my dynamic param for the route
        templateUrl: "template.html"
        controller: "ProfilePageController"
        resolve: {
            profile: function(ProfileService , $routeParams ) {
                // $routeParams.id => get the route param that called :id
                return ProfileService.getProfile($routeParams.id);
            }
        }
    })

用于为每个angularjs菜单项创建配置文件的工业机制

2 个答案: