ui-router中的多级路由

时间:2016-05-18 13:01:45

标签: angularjs routing angular-ui-router

我正在尝试使用 ui-router 在嵌套路由中实现多个路由,这是我的路由配置:

     $stateProvider
     .state('login', {
         url: '/',
         templateUrl: './app/login/login.html',
         controller: 'loginController as lc'
     })
     .state('orgProfile', {
         url: '/orgProfile',//1st level of routing
         templateUrl: 'app/companyProfile/companyProfile.html',//this page is displayed in ui-view of the index page
         controller: 'orgController as oc'

     })
     .state('orgProfile.employee', {//second level of routing
         url: '/employee',
         views: {
             'nestedViews': {**//name of the ui-view in companyProfile.html**
                 templateUrl: 'app/employee/employee.html',// up to here routing is fine.
                 controller: 'employeeController as em'
             }
         }
     })

 .state('orgProfile.employee.empDetails', {
     url: '/jfp',         
     views: {
         'nestedViews': { 
             templateUrl: 'app/employee/employeeDetail.html',
             controller: 'employeeDetailController as edm'
         }
     }
 })

我的路由很适合employee.html页面,即我已经完成了嵌套路由。现在我只想更改目前显示员工详细信息的ui-view。 这就是我所说的ui-sref

<md-content layout-padding layout-wrap>
<md-list>
<md-list-item ng-repeat="emp in em.empDetails">    
<md-button ui-sref="orgProfile.employee.empDetails" >{{emp.username}}  </md-button>
</md-list-item>
</md-list>

任何人请解释我如何执行此类路由。任何建议和意见都非常感谢。

my logic here:-"after second level of routing when I click inside that level I want to reverse back or clear current routing and populate it with new routes inside the same routes "

0 个答案:

没有答案