angularjs - 在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 '';
                                  }
                              }
                              );

当我单击链接时，它会将我带到 /user/{{username}} 这些对于不同的用户名是不同的，并且我正在返回 xml 结果。我需要使用一个模板，当为任何用户单击链接时，它将使用该模板作为模板并读取和格式化这些数据....请协助

Answer 1

好的，我能够解决我的问题，我想在这里发布解决方案。谢谢大家，您的指点实际上引导我找到解决方案：

我的控制器传入路由参数：

.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", function ($scope, $http, $log, $location, 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 模板中，我添加了参数

 <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 以获取特定用户的信息，然后将该数据传回.. ..

Answer 2

在此处使用状态参考。将ng-href 替换为 ui-sref 和 stateParams。

<td>{{user.id}}</td>
<td><a ui-sref="userDetail({userDetail: user})">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>

...并在用户的配置文件视图中获取用户对象。