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

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

<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>

...并在用户的个人资料视图中获取用户对象。

Answer 2

好的，我能够解决我的问题，我想在这里发布解决方案..谢谢你们的指针实际上引导我解决方案：

我的控制器我通过路线参数：

.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”，函数（$ 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以获取特定用户的信息，然后传递该数据回来......

如何在Angular Js中单击时使用不同的模板进行动态链接

2 个答案: