23.10.2014, 15:39
|
Интересующийся
|
|
Регистрация: 02.10.2013
Сообщений: 22
|
|
Формирование ссылок
Всем привет!
С помощью ng-click я показываю сервисы нажатой категории, при этом в адресной строке браузера id категории не пишется, так как все происходит в одном темплейте (как мне и надо). Как вручную сформировать ссылку в адресной строке, чтобы потом можно было ввести эту ссылку и браузер автоматический перейдет на нужную категорию?
<div class="category" ng-repeat="category in categories">
<a href="javascript:void(0)" class="link_service" ng-click="showServices(category.id)">
{{category.name}}
</a>
</div>
<div style="clear: both;"></div>
</div>
<div class="services">
<div class="category_name">
{{selectedCategory.name}}
<i class="sort_category icon-th-list" ng-click="sortServices()" title="Сортировка сервисов"></i>
<i class="edit_category icon-pencil" ng-click="editCategory(selectedCategory.id)" title="Редактирование категории"></i>
</div>
<ul class="service_list" id="serviceList">
<li class="li_service" ng-repeat="service in selectedCategory.services">
<a href="javascript:void(0);" class="a_service">
<b>{{service.name}}</b>
</a>
<span class="star" ng-class="{'on' : service.favorite}" ng-click="addToFavorite(service.id)"></span>
</li>
</ul>
</div>
var servicesCatalog = angular.module('servicesCatalog', [
'catalogControllers'
]);
// роутинг
servicesCatalog.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/catalog', {
templateUrl: 'views/catalog.html',
controller: 'Catalog'
}).
when('/favorites', {
templateUrl: 'views/favorites.html',
controller: 'Favorites'
}).
when('/applications', {
templateUrl: 'views/applications.html',
controller: 'Applications'
}).
when('/catalog/:categoryId/:serviceId', {
templateUrl: 'views/service-detail.html'
}).
otherwise({
redirectTo: '/catalog'
});
}]);
// контроллер
catalogControllers.controller('Catalog', ['$scope', '$http', '$rootScope','$location', '$routeParams',
function($scope, $http, $location, $routeParams, $rootScope) {
$http(
{
method: 'POST',
url: 'ajax/ajax.php',
data: {action: 'showCategories'}
}).
success(function(data, status, headers, config) {
console.log(data);
$scope.categories = data;
}).
error(function(error, status, headers, config) {
console.log('ERROR => ' + error);
});
$scope.showServices = function (categoryId) {
$scope.selectedCategory = $scope.categories[categoryId];
};
}]);
|
|
23.10.2014, 22:28
|
|
Аспирант
|
|
Регистрация: 24.04.2014
Сообщений: 66
|
|
А не хочешь ли перейти на ui-router ? Там это просто. Он связывает URL'ы с "состояниями", а не темплейтами.
Соответственно, куча состояний может иметь один и тот же темплейт (или разные - на выбор) и при этом адресоваться по разному.
Другими словами: за тебя уже всё сделали, только чуток изучи и юзай...
Я поначалу тоже подобными вопросами парился, а потом сообразил схему в которой ng-click вообще без надобности для управления состояниями. Достаточно ui-sref (виртуальные ссылки ui-router'а). В них в качестве параметра устанавливается желаемое состояние, а соответствующий URL формируется автоматически (чего тебе как раз и надобно).
И таки да, "..потом можно ввести эту ссылку и браузер автоматический перейдет на нужную категорию.."
Последний раз редактировалось MetaDriver, 23.10.2014 в 22:35.
|
|
24.10.2014, 11:11
|
Интересующийся
|
|
Регистрация: 02.10.2013
Сообщений: 22
|
|
MetaDriver,
Спасибо Большое!) Я нашел вот такую библиотечку
http://habrahabr.ru/post/190096/
|
|
24.10.2014, 15:27
|
Интересующийся
|
|
Регистрация: 02.10.2013
Сообщений: 22
|
|
MetaDriver,
а если сделать так?
$routeProvider.
/*when('/catalog', {
templateUrl: 'views/catalog.html',
controller: 'Catalog'
}).*/
when('/catalog/:categoryId', {
templateUrl: 'views/catalog.html',
controller: 'Catalog'
}).
when('/favorites', {
templateUrl: 'views/favorites.html',
controller: 'Favorites'
}).
when('/applications', {
templateUrl: 'views/applications.html',
controller: 'Applications'
}).
when('/catalog/:categoryId/:serviceId', {
templateUrl: 'views/service-detail.html'
}).
otherwise({
redirectTo: '/catalog/:categoryId'
});
<div class="category" ng-repeat="category in categories">
<a href="#/catalog/{{category.id}}" class="link_service" ng-click="showServices(category.id)">
{{category.name}}
</a>
</div>
И в контроллере проверять по параметру ? Или как все же лучше?
|
|
24.10.2014, 16:45
|
Интересующийся
|
|
Регистрация: 02.10.2013
Сообщений: 22
|
|
MetaDriver,
не знаю как сделать проверку на то, что ajax запрос уже был выполнен
catalogControllers.controller('Catalog', ['$scope', '$http', '$location', '$routeParams', '$rootScope',
function($scope, $http, $location, $routeParams, $rootScope) {
/*if($rootScope.categoryId.length == 0)
{
$rootScope.categoryId = 1;
}*/
if()
{
$http(
{
method: 'POST',
url: 'ajax/ajax.php',
data: {action: 'showCategories'}
}).
success(function(data, status, headers, config) {
$scope.categories = data;
$rootScope.ajax = true;
}).
error(function(error, status, headers, config) {
console.log('ERROR => ' + error);
});
}
$scope.selectedCategory = $scope.categories[$routeParams.categoryId];
console.log($scope.selectedCategory);
|
|
24.10.2014, 17:30
|
Интересующийся
|
|
Регистрация: 02.10.2013
Сообщений: 22
|
|
MetaDriver,
сделал вот так
var servicesCatalog = angular.module('servicesCatalog', [
'catalogControllers'
]);
servicesCatalog.run(function($rootScope, $http) {
$rootScope.ajax = false;
});
servicesCatalog.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/catalog/:categoryId', {
templateUrl: 'views/catalog.html',
controller: 'Catalog'
}).
when('/favorites', {
templateUrl: 'views/favorites.html',
controller: 'Favorites'
}).
when('/applications', {
templateUrl: 'views/applications.html',
controller: 'Applications'
}).
when('/catalog/:categoryId/:serviceId', {
templateUrl: 'views/service-detail.html'
}).
otherwise({
redirectTo: '/catalog/:categoryId'
});
}]);
catalogControllers.controller('Catalog', ['$scope', '$http', '$location', '$routeParams', '$rootScope',
function($scope, $http, $location, $routeParams, $rootScope) {
/*if($routeParams.categoryId.length == 0)
{
$routeParams.categoryId = 0;
}*/
if($rootScope.ajax == false)
{
$http(
{
method: 'POST',
url: 'ajax/ajax.php',
async: false,
data: {action: 'showCategories'}
}).
success(function(data, status, headers, config) {
$rootScope.categories = data;
$rootScope.ajax = true;
}).
error(function(error, status, headers, config) {
console.log('ERROR => ' + error);
});
}
$scope.selectedCategory = $rootScope.categories[$routeParams.categoryId];
/*setTimeout(function(){
$scope.selectedCategory = $rootScope.categories[$routeParams.categoryId];
}, 1000);*/
$scope.showServices = function (categoryId) {
$scope.selectedCategory = $rootScope.categories[categoryId];
};
Но scope.selectedCategory = $rootScope.categories[$routeParams.categoryId]; происходит раньше чем обрабатывается запрос , как это исправить?
|
|
25.10.2014, 14:14
|
|
Аспирант
|
|
Регистрация: 24.04.2014
Сообщений: 66
|
|
Сообщение от KOPC1886
|
MetaDriver,
сделал вот так
...................................
Но scope.selectedCategory = $rootScope.categories[$routeParams.categoryId]; происходит раньше чем обрабатывается запрос , как это исправить?
|
Как-то так:
function($scope, $http, $location, $routeParams, $rootScope) {
if($rootScope.ajax == false)
{
$http(
{
method: 'POST',
url: 'ajax/ajax.php',
async: false,
data: {action: 'showCategories'}
}).
success(function(data, status, headers, config) {
$rootScope.categories = data;
$rootScope.ajax = true;
$scope.selectedCategory = $rootScope.categories[$routeParams.categoryId];
$scope.showServices = function (categoryId) {
$scope.selectedCategory = $rootScope.categories[categoryId];
};
}).
error(function(error, status, headers, config) {
console.log('ERROR => ' + error);
});
}
|
|
27.10.2014, 10:44
|
Интересующийся
|
|
Регистрация: 02.10.2013
Сообщений: 22
|
|
MetaDriver,
а почему
$scope.showServices = function (categoryId) {
$scope.selectedCategory = $rootScope.categories[categoryId];
};
в запросе?
|
|
27.10.2014, 10:55
|
Интересующийся
|
|
Регистрация: 02.10.2013
Сообщений: 22
|
|
MetaDriver,
я вынес
$scope.showServices = function (categoryId) {
$scope.selectedCategory = $rootScope.categories[categoryId];
};
за пределы запроса, выводится все хорошо почти, но есть момент, что список сервисов показывается только когда второй раз нажимаешь на категорию, при первом клике не срабатывает, хотя сервисы в консоли выводятся.
|
|
27.10.2014, 22:12
|
|
Аспирант
|
|
Регистрация: 24.04.2014
Сообщений: 66
|
|
Сообщение от KOPC1886
|
MetaDriver,
а почему
...............
в запросе?
|
Без понятия. Я особо не вникал, просто показал вариант управления последовательностью обработки.
|
|
|
|