ui路由器嵌套视图不显示

我正在使用ui-router，并且当我更改为状态neat.home.patientDashboard时，视图patientBoard不会被替换为父状态中的一个，因此它保持相同的视图。我尝试在点击patientTable.html中的表格项目时更改状态。ui路由器嵌套视图不显示

此外，我想采取在家庭状态的网址字段，但如果我把它视图不显示。

我是AngularJS中的一名新成员，所以如果有什么事情我没有按照标准做或者我道歉。

如果有人可以帮助我，这将是伟大的，因为我坚持了一天了。

感谢

neat.js：

angular.module('neat', ['ui.router']) 
    .config(function ($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('home', { 
       url: '/', 
       templateUrl: '/views/dataBoard.html', 
       controller: 'BaseController' 
      }) 
      .state('home.board', { 
       views: { 
        'patientBoard' : { 
         templateUrl: '/views/patient/patientTable.html', 
         controller: 'PatientTableController' 
        }, 
        'messageBoard' : { 
         templateUrl: '/views/messageBoard.html', 
         controller: 'MessageBoardController' 
        } 
       } 
      }) 
      .state('home.board.patientDashboard', { 
       views: { 
        '[email protected]' : { 
         templateUrl: '/views/patient/patientDashboard.html', 
         controller: 'PatientDashboardController' 
        } 
       } 
      }); 

     $urlRouterProvider.otherwise('/'); 
    });

这里是HTML的一个样本：

的index.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>NEAT</title> 
     <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="../css/style.css"> 
     <script src="../lib/jquery/jquery-1.12.3.min.js"></script> 
     <script src="../lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script> 
     <script src="../lib/angularJS/angular.min.js"></script> 
     <script src="../lib/angularJS/angular-ui-router.min.js"></script> 
     <script src="../js/neat.js"></script> 
     <script src="../js/controllers/baseController.js"></script> 
     <script src="../js/controllers/patientTableController.js"></script> 
     <script src="../js/controllers/patientDashboardController.js"></script> 
     <script src="../js/controllers/patientInfoController.js"></script> 
     <script src="../js/controllers/messageBoardController.js"></script> 
    </head> 
    <body ng-app="neat"> 
     <div ui-view></div> 
    </body> 
</html>

dataBoard.html：

<div class="container-fluid board"> 
    <div class="row"> 
     <div ui-view="patientBoard" class="col-sm-8"></div> 
     <div ui-view="messageBoard" class="col-sm-4"></div> 
    </div> 
</div>

patientTable.html

<div class="table-responsive"> 
    <table class="table table-striped table-hover table-bordered"> 
     <tr> 
      <th>Nome</th> 
     </tr> 
     <tr ng-repeat="patient in patientsCollection.items"> 
      <td> 
       <a ui-sref="home.board.patientDashboard">{{patient.data[1].value}}</a> 
      </td> 
     </tr> 
    </table> 
</div>

来源

2016-06-09 gqmartins

呃你最后的路线home.board.patientDashboard是另一种观点认为，应该增加一个标签ui-view来显示它，或重命名$state所以你不要添加其他视图。

来源

2016-06-09 17:18:31

ui路由器嵌套视图不显示

回答

相关问题