Question

我正在构建一个节点js应用程序，其中我有一个角度js的页面。在其中一个页面上，列出所有用户（作为超链接），然后单击其中一个用户以访问有关该用户的信息。

因此，如果第一页的URL（即所有用户）是/ users，我希望第二个URL看起来像/ users /：id。所以，在某种程度上我想模仿REST API格式。

已找到用户的信息，一旦找到用户ID，我就试图使用$ location.path（index）。

最初我认为使用像ng-if这样的东西可以帮助我使用同一页面进行渲染。所以，在我的.jade文件中，我添加了这个条件：

div(ng-show='loadAllUsers()')

$scope.loadAllUsers = function(){
            console.log($scope.index == -1)
            return $scope.index == -1;
        };

$ scope.index已初始化为-1。所以，我认为这样的东西在生成新的id值时会起作用。但是，问题是它似乎没有重新加载整个页面或div ..我也尝试使用window.location.href。即使更新了URL，但即使这样也会破坏......

那么，有没有办法在同一个jade文件上做这个呢？如果没有，那么我该如何解决这个问题？

Answer 1

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, UserService) {
  
  $scope.userDetails={};
   //get the list of users from data base. here i am taking some dummy values.
    $scope.users=[{
      id:1,
      name:"Rahul"
    },
    {
      id:2,
      name:"Ajay"
    },
    {
      id:3,
      name:"Mohit"
    }];  
  
  // get user details
  $scope.getUserDetails=function(userId){
      UserService.get({id:userId},function(userDetails){
        $scope.userDetails=userDetails;
      });
    };
    
});
  
   // No need to change the page URL. Above function will 
   // call 'UserService' factory. UserService will communicate 
   // with REST API with URL pattern 'app/rest/users/:id'.  
   // ':id' will be replaced by the id passed by above function. 
   // like 'app/rest/users/2'
    
angular.module('myApp').factory('UserService',function ($resource) {
    return $resource('app/rest/users/:id', {}, {
          get':{method:'GET', isArray: false}
    });
});

<div ng-app="myApp" ng-controller="myCtrl">
  <div>
    <table>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
      <tr ng-repeat="user in users">
        <td>{{user.id}}</td>
        <td ng-click="getUserDetails(user.id)">{{user.name}}</td>
      <tr>
    </table> 
 </div>
 <div>
   <h3>User Details</h3>
      id : userDetails.id <br/>
      name : userDetails.name <br/>
    // other details
 </div>
</div>

Angular js在同一页面上重定向URL？

1 个答案: