Question

标题内容=＆gt;主菜单名称是服务，其子菜单是abc，def，pqr。这是在index.html
而service.html有3个单独的div，一个显示包含abc，两个显示包含def，三个显示包含pqr。
当我点击标题菜单（ieservice =＆gt; abc或def或pqr）时，会从index.html进行angularjs路由调用，然后它应该显示其特定的div其他将不会显示。

Answer 1

在index.html中输入ng-view标签下载角度路由并将此依赖项注入您的应用程序。把路由代码放在

中

app.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        redirectTo : '/user'
    })
    .when('/register', {
        templateUrl: 'client_assets/views/register.html',
        controller: 'registerController'
    })
    .when('/login', {
        templateUrl: 'client_assets/views/log_in.html',
        controller: 'logInController'
    })
})

现在根据路线确定要添加的html模板和控制器。

Answer 2

使用菜单项作为网址中传递的参数，然后使用ng-switch或ng-show来显示所选内容。

app.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        redirectTo : '/'
    })
...
    .when('/menu/:item', {
        templateUrl: 'index.html',
        controller: 'indexController'
    })

在控制器中，注入$routeParams：

app.controller('indexController', function($scope, $routeParams) {
  $scope.menuItem = $routeParams.item;
});

索引中的

：

<div ng-show='menuItem == "abc">abc</div>
<div ng-show='menuItem == "def">def</div>
<div ng-show='menuItem == "pqr">pqr</div>

添加了好处，您无需创建新路线来创建包含index.html内容的新菜单

缺点，在index.html中拥挤不堪

如何使用angularjs路由显示特定的div？

2 个答案: