Angular js在同一頁面上重定向網址？

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。即使更新的網址，但即使是這樣...

那麼，有沒有辦法在同一個玉文件上做這件事？如果沒有，那麼我該怎麼處理這個問題呢？

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>