найти, какая ссылка вызвала изменение маршрута

Question

Приложение использует angularjs.У меня есть панель навигации, которая открывает страницы, а также другой пользовательский интерфейс, который также открывает те же страницы (те же ссылки).

Я использую $locationChangeStart, чтобы при открытии страницы открывать подменю на панели навигации.из другого интерфейса.

Когда я открываю ту же страницу из панели навигации, происходит переключение, и подменю панели навигации закрывается.

$rootScope.$on("$locationChangeStart", function(event, next, current) { 

  $rootScope.hashUrl = next.split('#').pop();
  $rootScope.hashUrl = '#' + $rootScope.hashUrl;
  console.log($rootScope.hashUrl, "URL");   //#!/addflats
  $rootScope.addActiveToSidebarElement(event, next, current);

});

Функция, которую вызывает locationChangeStart:

$rootScope.addActiveToSidebarElement = function(event, next, current) {
  $rootScope.anchorElement = $("a[href='" + $rootScope.hashUrl + "']");
  if (parentLi.hasClass('associationChildLi')) {
    $rootScope.anchorElement.addClass('selectedSideBarChildActive');
    $('.associationUl').slideToggle();
  }
}

Обе ссылки (из панели навигации и другого пользовательского интерфейса) вызывают изменение маршрута.Как узнать, какая ссылка вызвала изменение маршрута?

Изменить :

Я постараюсь объяснить лучше.У меня есть две ссылки, которые открывают одну и ту же страницу.Одна ссылка с панели навигации, одна с плитки.

Когда я открываю страницу, я хочу выделить соответствующий элемент навигации.Это работает естественно, когда я использую панель навигации.Когда я открываю страницу из плитки, я должен выделить элемент навигации.

Поэтому я использую $locationChangeStart, чтобы определить, какой маршрут я сейчас использую, и найти на панели навигации элемент <li><a href='#!/addflats'>link</a></li>, который соответствует текущему маршруту, и добавить класс, который выделяет его.

Мне нужно найти, какая ссылка (панель навигации или мозаика) вызвала изменение маршрута

Answer 1

Очень удобно добавлять ссылки на $ state и $ stateParams в $ rootScope, чтобы вы могли получить к ним доступ из любой области приложения.

Вы можете попробовать директиву ui-sref-active в модуле ui.router.state, что наряду с ui-sref добавляет классы к элементу, когда состояние связанной директивы ui-sref активно, и удаляет их, когда он неактивен.ui-sref-active может жить в том же элементе, что и ui-sref, или в родительском элементе.Будет использован первый ui-sref-active, найденный на том же уровне или выше ui-sref.Активируется, когда целевое состояние пользовательского интерфейса или любое дочернее состояние активно.

здесь работает плункер http://next.plnkr.co/plunk/dY3NluIyEFU7yuhh, когда вы нажимаете Route 1, он покажет вам route1.html и его состояниеизменится на активный, и то же самое произойдет, если вы нажмете click Route 2 внутри route1.html, когда вы нажмете R1 items, перейдет к маршруту route2, HTML и изменит состояние Route 2 на активное.

Надеюсь, это то, что ты ищешь.

Answer 2

Просто чтобы уточнить, звучит так, будто ваша цель отличается от вашего вопроса.Я попытаюсь рассмотреть то, что звучит как ваша цель: «Выделите элемент навигации, который отражает мое активное состояние».

Я думаю, что вы захотите использовать $ locationChangeSuccess , потому чтоиспользование start, вероятно, поставит вас перед какими-либо манипуляциями DOM во время и после изменения состояния, которое может включать перезагрузку вашего шаблона навигации.

Важно отметить, что вам не следует выполнять эти манипуляции DOM в контроллере,По крайней мере, у вас должен быть контроллер вокруг вашей навигации и переменные $ scope, которые вы можете привязать к этим элементам навигации с помощью ng-class.

Как только вы используете контроллер вокруг вашей навигации,вы можете прослушать событие $ locationChangeSuccess с этого контроллера, проверить новый возвращаемый URL-адрес и установить соответствующие переменные $ scope.

---

Если вы используете ui-router, этостановится намного проще, потому что вы можете просто использовать ng-class="{'active':$state.includes('example.state')}" для рассматриваемого HTML-элемента nav AngularUI: $ state.includes

Answer 3

Если у вас есть две ссылки, которые вы хотите различить, вы можете добавить поисковый запрос к URL:

<li><a href='#!/addflats?from=nav'>link</a></li>

и

<li><a href='#!/addflats?from=tile'>link</a></li>

Answer 4

Принцип барботажа DOM может помочь вам в этом сценарии.
Когда событие происходит с элементом, оно сначала запускает обработчики на нем, затем на его родительском элементе, а затем все выше на других предках.

Аналогично, здесь происходит событие click для тега, оно обрабатывает это событие и перемещается вплоть до родительского тега.Поэтому, когда вы будете нажимать на кнопки пользовательского интерфейса, он даст вам родительский тег, а когда вы нажмете на кнопки навигационной панели, он даст вам родительский тег, и вы узнаете, по какому маршруту был достигнут маршрут.

см.этот пример

document.getElementById("ui").addEventListener("click", myFunction);
document.getElementById("navbar").addEventListener("click", myFunction);
function myFunction() {
	alert("Parent Tag Name-"+this.tagName)
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

<div id="ui">
  <a href="">Home</a>
  <a href="">News</a>
  <a href="">Contact</a>
  <a href="">About</a>
</div>
<br>
<ul id="navbar">
  <li><a >Home</a></li>
  <li><a href="">News</a></li>
  <li><a href="">Contact</a></li>
  <li><a href="">About</a></li>
</ul>