Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2016, 08:32
Аспирант
Отправить личное сообщение для neon_tmn Посмотреть профиль Найти все сообщения от neon_tmn
 
Регистрация: 29.04.2010
Сообщений: 51

Ссылки ui-sref со {{scope}} не всегда отрабатывают
Добрый день.
Динамически строю меню разделов категорий.
Пишу ссылки так:
<a ui-sref="{{CurrentPageForCategory}}.category({category:'+data[i].subrecords[j].id+'})">'+data[i].subrecords[j].name+'</a>

CurrentPageForCategory получаю из контроллеров. В каждом контроллере вывожу в консоль для проверки.
В итоге, в консоль у меня все выводится как нужно, а вот при нажатии на ссылку иногда появляется ошибка и переход не выполняется.
Говоря "Иногда" подразумеваю так:
Обновил страницу - работает. Обновил страницу, снова работает, обновил - не работает, обновил - работает. То есть, если сразу с загрузкой страницы заработало, то и будет работать, если сразу с загрузкой страницы не заработало, то не будет работать.
Ошибка:
angular.js:13920 Error: Could not resolve '.category' from state ''
Покопавшись понял, что ангуляр не всегда мне строит ссылку, то есть глядя в код страницы вижу, что когда работает, то у меня к ссылке добавляется href="ссылка", когда не работает, то href-а нет в ссылке.
Возможно, это из-за того, что у меня иногда CurrentPageForCategory не передается в ссылку, хотя при просмотре кода страницы, он всегда есть в ui-sref.
Пробовал добавлять сразу href в ссылку, она точно так же у меня всегда есть и всегда заполнена, но иногда ссылка все равно не отрабатывает показывая все ту же ошибку angular.js:13920 Error: Could not resolve '.category' from state ''
По сути у меня должно быть не '.category' а 'catalog.category'/
В чем может быть дело?
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2016, 08:44
Аспирант
Отправить личное сообщение для neon_tmn Посмотреть профиль Найти все сообщения от neon_tmn
 
Регистрация: 29.04.2010
Сообщений: 51

Меню у меня строится в директиве, есть это построение добавить в
setTimeout(function(){
					построение меню
				});

Тогда вроде нормально отрабатывает.
Но ведь это наверное не выход?
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2016, 09:24
Аспирант
Отправить личное сообщение для neon_tmn Посмотреть профиль Найти все сообщения от neon_tmn
 
Регистрация: 29.04.2010
Сообщений: 51

и то с setTimeout не всегда срабатывает.
Ответить с цитированием
  #4 (permalink)  
Старый 09.11.2016, 09:35
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Вообще - делай пример, потому что ничего не понятно по сути.
Но есть предположение что инфу о категориях ты получаешь асинхронно и передаешь ее в директиву. Так вот - на момент открытия страницы с директивой которая юзает какие либо данные - эти данные уже должны быть доступны!
Ответить с цитированием
  #5 (permalink)  
Старый 09.11.2016, 09:48
Аспирант
Отправить личное сообщение для neon_tmn Посмотреть профиль Найти все сообщения от neon_tmn
 
Регистрация: 29.04.2010
Сообщений: 51

все верно, сначала в контроллере я делаю http запрос, затем в директиве результат использую.
Пример попробую сделать. Суть в том, что я в директиве совсем не красивым способом с помощью чистого js делаю меню с помощью двух циклов. Меню представляет собой аккордион.
Если бы можно было как-то сделать с помощью ng-repeat, то я бы сделал, ведь туда данные попадут после загрузки и отрисовка тогда и начнется.
мне нужен аккордион по такой разметке:
<div id="accordion">
      <h3>Пункт 1</h3>
      <div>Контент 1</div>
      <h3>Пункт 2</h3>
      <div>Контент 2</div>
      <h3>Пункт 3</h3>
      <div>Контент 3</div>
</div>

Как мне такой цикл сделать с помощью стандартной директивы не понятно.

Последний раз редактировалось neon_tmn, 09.11.2016 в 10:28.
Ответить с цитированием
  #6 (permalink)  
Старый 09.11.2016, 12:20
Аспирант
Отправить личное сообщение для neon_tmn Посмотреть профиль Найти все сообщения от neon_tmn
 
Регистрация: 29.04.2010
Сообщений: 51

.controller("IndexCtrl", function ($scope, $http) {
		$scope.setCurrentPageForCategory = function(CurrentPageForCategory){ //функция для присвоения значения в других контроллерах и передачи в родительский controller
			$scope.CurrentPageForCategory = CurrentPageForCategory;
		};
		
		$http.get("http://localhost/modules/index/index.php").then(function(response) {
			$scope.categories = response.data.categories;
		}, function(error) {});

	});


// Директива в которой строится аккордион. Выглядит все это очень плохо, не красиво и не правильно.
	.directive("categoriesList", function($compile) {
		return function(scope, element, attributes) {
			var attrValue= attributes['categoriesList'];
			var data=scope[attrValue];

				if (angular.isArray(data)) {
					for (var i = 0; i < data.length; i++) {
						var e = angular.element("<h3>");
						element.append(e);
						e.text(data[i].name);
						var e = angular.element("<div>");
						element.append(e);
						for (var j = 0; j < data[i].subrecords.length; j++) {
							var content = $compile(e.html() + '<a ui-sref="{{CurrentPageForCategory}}.category({category:'+data[i].subrecords[j].id+'})">'+data[i].subrecords[j].name+'</a>' + '<br>')(scope);
							e.html(content);
						}
					}
				}

				$("#accordion h3").addClass('accordion-not-active');

				$("#accordion h3").click(function() {
					$(this).toggleClass('accordion-active accordion-not-active');
				});
				
				$('#accordion').accordion();
		}

	});



Шаблон HTML
<div id="accordion" ng-if="categories" categories-list="categories"></div>
Ответить с цитированием
  #7 (permalink)  
Старый 09.11.2016, 12:52
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Вообще пример-это рабочий пример кода а не пару портянок кода. Для примеров есть такие сервисы как jsfiddle codepen и пр.

Вобщем, у тебя два варианта:
1 если ты используешь uirouter то выполни подгрузку категорий в resolve https://github.com/angular-ui/ui-router/wiki
2 ты можешь использовать в директиве $scope.$watch для того чтобы перегенерить меню как только обновится моделька которую вотчишь.
Ответить с цитированием
  #8 (permalink)  
Старый 09.11.2016, 14:54
Аспирант
Отправить личное сообщение для neon_tmn Посмотреть профиль Найти все сообщения от neon_tmn
 
Регистрация: 29.04.2010
Сообщений: 51

resolve сделал, на первый взгляд теперь после каждой перезагрузки страницы стабильно работает ссылка. НО по какой-то причине перестал обновляться href. Решил проблему с помощью ng-href.
Все таки интересует вопрос, как можно сделать ng-repeat, чтобы получить вот такой результат:
<div id="accordion">
      <h3>Пункт 1</h3>
      <div>Контент 1</div>
      <h3>Пункт 2</h3>
      <div>Контент 2</div>
      <h3>Пункт 3</h3>
      <div>Контент 3</div>
</div>
Ответить с цитированием
  #9 (permalink)  
Старый 09.11.2016, 18:27
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

А в чем сложность то?
<div id="accordion" ng-repeat="cat in categories">
      <h3 ng-bind="cat.name"></h3>
      <div ng-bind="cat.content"></div>
</div>
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2016, 15:24
Аспирант
Отправить личное сообщение для neon_tmn Посмотреть профиль Найти все сообщения от neon_tmn
 
Регистрация: 29.04.2010
Сообщений: 51

Таким кодом создается
<div id="accordion">
      <h3>Пункт 1</h3>
      <div>Контент 1</div>
</div>
<div id="accordion">
      <h3>Пункт 2</h3>
      <div>Контент 2</div>
</div>
<div id="accordion">
      <h3>Пункт 3</h3>
      <div>Контент 3</div>
</div>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как бы вы переписали этот код GayCoder Общие вопросы Javascript 23 01.02.2016 08:19
Внутри разворачивающегося по клику DIVа не работают ссылки JavaScriptNoob Элементы интерфейса 2 17.11.2015 00:01
Игра в демки, пиар ангуляра и обучение. DjDiablo Angular.js 39 07.06.2014 13:11
вопрос по видимости переменных. yiooxir Angular.js 3 31.10.2013 12:37