Как использовать другой шаблон для динамической ссылки при нажатии в Angular Js
Все, я сталкиваюсь с проблемой, которую я надеюсь, что кто-то может помочь мне решить. У меня есть служба, которая возвращает список пользователей с соответствующей ссылкой, которая при нажатии на нее требует, чтобы пользователь вошел в систему, и после успешного входа в систему пользователю предоставляется информация о пользователе. Как разрешить пользователю нажимать на эту ссылку и использовать шаблон, чтобы показать свои данные. Я хочу повторно использовать этот частичный шаблон для всех пользователей
пример:
Data: {{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. Мне нужно, чтобы это использовало шаблон, чтобы при щелчке по ссылке для любого пользователя он использовал его в качестве шаблона и считывал и форматировал эти данные.... пожалуйста, помогите
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>
So when i navigate from user list and click on user id i am routed to the template and controller with the passed id and are able to build the url for the service to grab the information for the specific user and then pass that data back....
Используйте ссылку на состояние здесь. Замените 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>
... и получить объект пользователя в виде профиля пользователя.