如何在Angular Js中點擊動態鏈接時使用不同的模板

Question

所有的我都面臨着一個問題，我希望有人能夠幫助我解決問題。我有一項服務，返回用戶列表並提供相應的鏈接，點擊該鏈接後需要用戶登錄，登錄成功後，用戶纔會看到用戶信息。如何讓用戶點擊此鏈接並使用模板顯示其詳細信息。我想重新使用這個局部模板爲所有用戶

例如： 數據：{{user.url}}收益率：http://localhost:5555/user/randi333
數據：{{user.url}}收益率：http://localhost:5555/user/rkds333

  <td>{{user.id}}</td> 
      <td><a ng-href="{{user.url}}">User Details</a></td> 
      <td>{{user.firstName}}</td> 
      <td>{{user.lastName}}</td> 
      <td>{{user.gender | gender}}</td> 
      <td>{{user.address}}</td> 
      <td>{{user.city}}</td> 
      <td>{{user.state}}</td> 
      <td>{{user.ZipCode}}</td> 
      <td>{{user.country}}</td> 
      <td>{{user.enrollmentEntitysCount}}</td> 
      <td>{{user.telephone}}</td> 

     </tr> 
    </tbody> 
var consumewebservice = angular 
          .module("myconsumewebservice", ["ngRoute"]) 
          .config(function ($routeProvider) { 
           $routeProvider 
           .when("/home", { 

            templateUrl: "Templates/home.html", 
            controller: "homeController" 
           }) 
           .when("/user", { 

            templateUrl: "Templates/user.html", 
            controller: "webserviceController" 
           }) 
           .when("/user/{{hash}}", { 

            templateUrl: "Templates/userdetails.html", 
            controller: "webserviceController" 
           }) 
          }) 
          .controller("webserviceController", function ($scope, $http,$log,$location,$anchorScroll) { 

           var successfulcallback = function (response) { 
            $scope.users = response.data; 
            $log.info(response); 
           }; 
           var errorcallback = function (response) { 
            $scope.error = response.data; 
            $log.error(response); 
           }; 
           $http.get('/api/users/') 
            .then(successfulcallback, errorcallback); 


          $scope.scrollTo = function (firstname) { 
            $location.hash(firstname); 
            $anchorScroll(); 
          } 


           //Scope to change view where we want the data to display 
           $scope.changeView = function (view) { 
            $location.path(view); // path not hash 
           } 
            $scope.search = function (item) { 
             if ($scope.searchText == undefined) { 
              return true; 
             } 
             else { 
              if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1 || item.city.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1) { 
               return true; 
              } 
             } 
             return false; 

            } 
            $scope.sortColumn = "firstname"; 
            $scope.reverseSort = false; 
            $scope.sortData = function (column) { 
             $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false; 
             $scope.sortColumn = column; 
            } 
            $scope.getSortClass = function (column) { 
             if ($scope.sortColumn == column) { 
              return $scope.reverseSort ? 'arrow-down' : 'arrow-up'; 
             } 
             return ''; 
            } 
           } 
          ); 

當我點擊它帶我到/用戶/ {{名}}鏈接這些都爲不同的用戶名不同，我得到XML結果返回。我需要這個使用模板，當爲任何用戶點擊鏈接時，它將使用它作爲模板並讀取和格式化這些數據....請協助

Answer 1

在此處使用狀態引用。使用狀態參數替換ng-href與ui-sref。

​​

...並在用戶的配置文件視圖中獲取用戶對象。

Answer 2

好吧，我能解決我的問題，我想在這裏發佈的解決方案。謝謝你的傢伙居然指針導致我的解決方案：

我控制我傳遞路線PARAMS：

.controller("userdetailsController", function ($scope, $http, $log, $location, $routeParams, ModalService) { 
var successfulcallback = function (response, modal) { 
    $scope.userdetail = response.data; 
    $log.info(response); 
    console.log("now on the userdetails controller success") 

}; 
var errorcallback = function (response) { 
    $scope.error = response.data; 
    $log.error(response); 
}; 
$http.get('/api/users/'+ $routeParams.id) 
    .then(successfulcallback, errorcallback); 

}）

用戶控制器 .controller（ 「UserController中」，功能（$範圍，$ HTTP，$日誌，$位置，ModalService）{

var successfulcallback = function (response) { 
     $scope.users = response.data; 
     $log.info(response); 
    }; 
    var errorcallback = function (response) { 
     $scope.error = response.data; 
     $log.error(response); 
    }; 



    $http.get('/api/users/') 
     .then(successfulcallback, errorcallback); 

然後在我的配置我添加的配置與參數

.when("/user/:id", { 
          templateUrl: "Templates/user-details.html", 
          controller: "userdetailsController" 

         }) 

在我的HTML模板，我加入了paramater

<tbody> 
    <tr ng-repeat="user in users"> 

     <td>{{user.id}}</td> 
     <td> <a href="#/user/{{user.username}}" >{{user.username}}</a></td> 

     <td>{{user.firstName}}</td> 
     <td>{{user.lastName}}</td> 
     <td>{{user.gender | gender}}</td> 
     <td>{{user.address}}</td> 
     <td>{{user.city}}</td> 
     <td>{{user.state}}</td> 
     <td>{{user.ZipCode}}</td> 
     <td>{{user.country}}</td> 
     <td>{{user.enrollmentEntitysCount}}</td> 
     <td>{{user.telephone}}</td> 

    </tr> 
</tbody> 
</table> 

所以，當我從用戶瀏覽列表，點擊用戶ID我是路由到模板和控制器使用通過的ID，並能夠建立服務的URL來獲取特定用戶的信息，然後將該數據傳回...