2015-03-03 37 views
0

我使用angular-ui-router进行路由页面。问题就像这个标题。第一个ui-view通常显示页面。第二个ui视图显示 第一个加载的页面不变。我不想展示第二个。angular-ui-router生成两个ui-视图

'use strict'; 
angular.module('test').config(['$stateProvider', 
             '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 
    // For unmatched routes 
    $urlRouterProvider.otherwise('/'); 

    // Application routes 
    $stateProvider 
     .state('index', { 
      url: '/', 
      templateUrl: 'templates/dashboard.html' 
     }) 

<html lang="en" ng-app="RedCA"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>RedCA Admin</title> 
    <link rel="stylesheet" href="css/main.min.css" /> 

    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js"></script> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.js"></script> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-cookies.js"></script> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-loader.js"></script> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-sanitize.js"></script> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-touch.js"></script> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-resource.js"></script> 

    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet"> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 

    <script type="text/javascript" src="components/jquery/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="components/ng-table/dist/ng-table.min.js"></script> 
    <script type="text/javascript" src="components/bootstrap-3.0.3/js/bootstrap.min.js"></script> 


    <!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> --> 
    <script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script> 



    <!-- Ace settings handler --> 
    <script type="text/javascript" src="components/ace.min/js/ace-extra.min.js"></script> 

    <!-- Ace Script --> 
    <script src="components/ace.min/js/ace-elements.min.js"></script> 
    <script src="components/ace.min/js/ace.min.js"></script> 

    <!-- Ace Styles --> 
<!--  <link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-fonts.css"/> 
    <link rel="stylesheet" type="text/css" href="components/ace.min/css/ace.min.css"/> 
    <link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-rtl.min.css"/> 
    <link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-skins.min.css"/> --> 

    <script type="text/javascript" src="components/angular-1.2.5/angular.min.js"></script> 
    <script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
    <script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script> 
    <script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script> 

    <script type="text/javascript" src="js/routingConfig-thirdparty.js"></script>  <!-- app controller side --> 
    <script type="text/javascript" src="js/st-openpms.concat.js"></script>  <!-- app controller side --> 
    <script type="text/javascript" src="js/dashboard.min.js"></script> <!-- rdash augular ui --> 
    <script type="text/javascript" src="openpms-st-test.templates.js"></script> <!-- openpms st --> 


</head> 
<body ng-controller="redcaCtrl"> 
    <div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak> 

    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar"> 
     <li class="sidebar-main"> 
      <a ng-click="toggleSidebar()"> 
      Dashboard 
      <span class="menu-icon glyphicon glyphicon-transfer"></span> 
      </a> 
     </li> 
     <li class="sidebar-title"><span>NAVIGATION</span></li> 
     <li class="sidebar-list"> 
      <a href="#">Dashboard <span class="menu-icon fa fa-tachometer"></span></a> 
     </li> 
     <li class="sidebar-list"> 
      <a href="#/tables">Tables <span class="menu-icon fa fa-table"></span></a> 
     </li> 
     <!-- <li class="sidebar-list"> 
      <a href="#/test">Test <span class="menu-icon fa fa-tachometer"></span></a> 
     </li> --> 

     <li class="sidebar-title"><span>Demonstration</span></li> 

        <li data-access-level="accessLevels.admin" active-nav><a 
        href="#/demo">Demo Page</a></li> 

     <!-- ///smart town 
       {{DOC_BASE}} -> # --> 

       <li class="sidebar-title"><span>SmartTown Sample</span></li> 
       <br> 

       <li data-access-level="accessLevels.user" active-nav><a href="#">Home</a></li> 
       <!--<li><a href="#/selectProject">Select Project</a> </li>--> 
       <li data-access-level="accessLevels.user" active-nav><a href="#/mainMenu">Main Menu</a></li> 
       <!--<li data-access-level="accessLevels.user" active-nav><a href="#/chat">Chat</a></li>--> 
       <li data-access-level="accessLevels.user" active-nav><a href="#/chatMulti">ChatMulti</a></li> 
       <li data-access-level="accessLevels.user" active-nav><a href="#/noti">Noti</a></li> 
       <!--<li data-access-level="accessLevels.anon" active-nav><a href="#/login">Log in</a></li>--> 
       <li data-access-level="accessLevels.anon" active-nav><a href="#/register">Register</a></li> 
       <li data-access-level="accessLevels.admin" active-nav><a 
        href="#/picload">Comm Pic</a></li> 
       <!--<li data-access-level="accessLevels.admin" active-nav><a href="#/crud">CRUD sample</a></li>--> 
       <li data-access-level="accessLevels.admin" active-nav><a 
        href="#/comm">Comm</a></li> 
       <li data-access-level="accessLevels.admin" active-nav><a 
        href="#/punchlist">Punch</a></li> 
       <li data-access-level="accessLevels.admin" active-nav><a 
        href="#/register">Register</a></li> 
       <!--<li data-access-level="accessLevels.user" active-nav><a href="#/private">Private</a></li>--> 
       <li data-access-level="accessLevels.admin" active-nav><a 
        href="#/admin">Admin</a></li> 
       <li data-access-level="accessLevels.user"><a href="" data-ng-click="logout()">Log out</a></li> 
<!-- ///smart town -->   


     </ul> 
     <div class="sidebar-footer"> 
     <div class="col-xs-4"> 
      <a href="https://github.com/rdash/rdash-angular" target="_blank"> 
      Github 
      </a> 
     </div> 
     <div class="col-xs-4"> 
      <a href="https://github.com/rdash/rdash-angular/README.md" target="_blank"> 
      About 
      </a> 
     </div> 
     <div class="col-xs-4"> 
      <a href="#"> 
      Support 
      </a> 
     </div> 
     </div> 
    </div> 
    <!-- End Sidebar --> 

    <div id="content-wrapper"> 
     <div class="page-content"> 

     <!-- Header Bar --> 
     <div class="row header"> 
      <div class="col-xs-12"> 
      <div class="user pull-right"> 
       <div class="item dropdown"> 
       <a href="#" class="dropdown-toggle"> 
        <img src="img/avatar.jpg"> 
       </a> 
       <ul class="dropdown-menu dropdown-menu-right"> 
        <li class="dropdown-header"> 
        Joe Bloggs 
        </li> 
        <li class="divider"></li> 
        <li class="link"> 
        <a href="#"> 
         Profile 
        </a> 
        </li> 
        <li class="link"> 
        <a href="#"> 
         Menu Item 
        </a> 
        </li> 
        <li class="link"> 
        <a href="#"> 
         Menu Item 
        </a> 
        </li> 
        <li class="divider"></li> 
        <li class="link"> 
        <a href="#"> 
         Logout 
        </a> 
        </li> 
       </ul> 
       </div> 
       <div class="item dropdown"> 
       <a href="#" class="dropdown-toggle"> 
        <i class="fa fa-bell-o"></i> 
       </a> 
       <ul class="dropdown-menu dropdown-menu-right"> 
        <li class="dropdown-header"> 
        Notifications 
        </li> 
        <li class="divider"></li> 
        <li> 
        <a href="#">Server Down!</a> 
        </li> 
       </ul> 
       </div> 
      </div> 
      <div class="meta"> 
       <div class="page"> 
       Dashboard 
       </div> 
       <div class="breadcrumb-links"> 
       Redca Administration 
       </div> 
      </div> 
      </div> 
     </div> 
     <!-- End Header Bar --> 

     <!-- Main Content --> 
     <div ui-view></div> 

     </div><!-- End Page Content --> 
    </div><!-- End Content Wrapper --> 
    </div><!-- End Page Wrapper --> 
</body> 
</html> 

回答

0

尝试调用。否则在$ routeProvider:

app.config(function($locationProvider, $routeProvider) { 
    $locationProvider.html5Mode(true); 
    $routeProvider 
    .when('/', { 
     templateUrl: '/a.html', 
     controller: 'ctrlA' 
    }) 
    .when('/b/:tagId', { 
     templateUrl: '/b.html', 
     controller: 'ctrlB' 
    }) 
    .when('/another', { 
     templateUrl: '/another.html', 
     controller: 'ctrlC' 
    }) 
    .otherwise({ redirectTo: '/' }); 
});