Question

我想使用angular.js路由器显示多个视图。我正在解释下面的代码。

的index.html：

<body>
<div id="wrapper" ng-view>

</div>
</body>

在这个正文部分中，我正在绑定以下部分html页面。

dashboard.html：

<!-- begin TOP NAVIGATION -->
<nav class="navbar-top" role="navigation">
<div class="nav-top">
<div class="text-left" style="padding-top:10px; width:800px; float:left;">
<span style="font-weight:bold; font-size:18px; vertical-align:middle; color:#FFF">Channabasavashwara Institude of Technology</span>
</div>
<ul class="nav navbar-right" style="float:right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i>  <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="profile.php">
<i class="fa fa-user"></i> My Profile
</a>
</li>
<li class="divider"></li>
<li>
 <a class="logout_open" href="logout.php">
<i class="fa fa-sign-out"></i> Logout
<strong>Admin</strong>
</a>
</li>
</ul>
 </li>

 </ul>

<div class="text-right" style="padding-top:15px; width:400px; float:right;">
<span style="font-size:12px; vertical-align:middle; color:#FFF">
Logged in as Admin</strong></span>
<span style="font-size:12px; color:#999">| </span>
<span style="font-size:12px; vertical-align:middle; color:#FFF" id="header-time">   
</span> 
<span style="font-size:12px; color:#999">| </span>   
</div>
</div>
<!-- /.nav-top -->
</nav>
<div id="page-wrapper" class="collapsed">
<div class="page-content">
<nav class="navbar navbar-default navbar-fixed-top"  style="margin-top:50px">
<div class="container" style="width:1270px;">
<div class="navbar-header navbar-brand">
Computer Science & Engineering
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
 <li class="active"><a href="#/">Home</a></li>
<li class="dropdown">
<a href="#profile" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">College profile<span class="caret"></span></a>
</li>
<li><a href="#dept">Colg.Department</a></li>
<li><a href="#princpal">Princpal</a></li>
<li><a href="#dept_head">Dept Head</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--<div class="row" style="padding-top:90px;"  ng-view>

</div>-->
</div>
</div>

在上面这个文件中我在li tag.i需要一些多项选项，当我选择任何一个选项时，另一个部分视图让我们说profile.html只会绑定在这个页面上。你可以查看一个ng-view标签位于注释行内。我有index.html的以下路由文件。

loginRoute.js：

var Admin=angular.module('Channabasavashwara',['ngRoute']);
Admin.config(function($routeProvider){
    $routeProvider
    .when('/',{
        templateUrl: 'dashboardview/login.html',
        controller: 'loginController'
    })
    .when('/dashboard',{
        templateUrl: 'dashboardview/dashboard.html',
        controller: 'dashboardController'
    })
    .when('/profile',{
        templateUrl: 'dashboardview/profile.html',
        controller: 'profileController'
    });
})

请帮助他们解决此问题。

Answer 1

如果我理解您的问题，那么您正在寻找Angular UI路由器：https://github.com/angular-ui/ui-router

这是一个增强的路由器。它可以处理视图中的多个视图，嵌套路由/视图等...

Answer 2

您只能有1 ng视图。大多数情况下，它会在您的index.html中使用（根据概述部分@ https://docs.angularjs.org/api/ngRoute/directive/ngView中的定义）

我听说ui-router可以满足您的需求。

Answer 3

dashboard.html使用<ng-view>绑定到routeProvider。使用ng-include包含模板profile.html，并根据$scope变量隐藏其可见性。如果用户根据您的逻辑选择某个选项，您可以使用ng-show显示或隐藏包含的模板。

使用angular.js显示多个视图

3 个答案: