ui-router angular master detail view

ui-router angular master detail view

本文关键字：view detail master angular ui-router      更新时间：2023-09-26

我想把用户列表[master]和用户详细信息[detail]放在同一个页面上。

https://plnkr.co/edit/EKY2pztGkKXUuQIyefUY?p =

预览

模块和配置。

var myModule = angular.module("myApp", ['ui.router']);  
myModule.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('user', {
      url : '/users',
      templateUrl:'users.html',
      controller : 'usersController'
  })
  .state('user.details', {
      url : '/:id',
      templateUrl:'users.html',
      controller : 'usersControllerDetail'
  });
  $urlRouterProvider.otherwise("/users");
});

myModule.controller('usersController' ,  function($scope){
  $scope.users = [{username : 'manish', id : 1}, { username : 'kaustubh', id :2} ]
});
myModule.controller('usersControllerDetail' ,  function($scope, $stateParams){
  console.log($stateParams.id);
});

当我点击主列表中的用户时，主列表在屏幕上呈现两次。

你能告诉我我哪里做错了吗

有可调和可工作的柱塞

为子

使用不同的模板
.state('user.details', {
      url : '/:id',
      //templateUrl:'users.html',
      templateUrl:'details.html',
      controller : 'usersControllerDetail'
});

这可以是模板

<div>
 <div ui-view>
  <h3>current state name: <var>{{$state.current.name}}</var></h3>

  <h5>params</h5>
  <pre>{{$stateParams | json}}</pre>
  <h5>state</h5>
  <pre>{{$state.current | json}}</pre>
 </div>
</div>
相关文章：