Question

该应用程序使用angularjs。我有一个打开页面的导航栏，还有另一个也打开相同页面（相同链接）的UI。

当我从另一个UI打开页面时，我正在使用$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();
  }
}

这两个链接（来自导航栏和其他UI）都会导致路线更改。如何查找哪个链接导致路线更改？

修改：

我会尽力解释得更好。我有两个打开同一页面的链接。导航栏中的一个链接，瓷砖中的一个链接。

打开页面时，我要突出显示相应的导航项。当我使用导航栏时，它自然起作用。从磁贴中打开页面时，必须突出显示导航项。

所以我正在使用$locationChangeStart来检测我当前在哪条路线上，并在导航栏中找到<li><a href='#!/addflats'>link</a></li>元素匹配当前路线并添加突出显示该路线的类。

我需要找到导致路线更改的链接（导航栏或图块）

Answer 1

如果您要区分两个链接，则可以在URL中添加搜索字词：

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

和

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

Answer 2

仅需澄清一下，听起来您的目标与您的问题有所不同。我将尝试解决听起来像您的目标的问题：“突出显示反映我的活动状态的导航项”。

我认为您应该使用$locationChangeSuccess，因为使用start可能会使您处于状态更改期间和之后状态更改之后发生的任何DOM操作之前，这可能包括重新加载导航模板。

需要注意的重要一点是，您不应该在控制器中进行这些DOM操作。至少，您应该在导航周围有一个控制器，并具有$ scope变量，您可以使用ng-class将这些变量绑定到这些导航项。

一旦您在导航周围使用控制器，就可以收听来自该控制器的$ locationChangeSuccess事件，检查新的网址返回并设置适当的$ scope变量。

如果您使用的是ui-router，这将变得非常容易，因为您可以在问题AngularUI: $state.includes的导航html元素上简单地使用ng-class="{'active':$state.includes('example.state')}"

Answer 3

在$ rootScope中添加对$ state和$ stateParams的引用非常方便这样您就可以从应用程序中的任何范围访问它们。

您可以尝试在模块{{1}中的ui-sref-active指令中，在相关ui-sref指令的状态为活动时，将ui.router.state与类ui-sref一起添加到元素中，并在其处于活动状态时将其删除。不活跃。 ui-sref-active可以与ui-sref位于同一元素上，也可以位于父元素上。将使用在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 4

在这种情况下，DOM的冒泡原理可能会对您有所帮助。
当事件发生在元素上时，它首先在该元素上运行处理程序，然后在其父元素上运行，然后一直在其他祖先上运行。

类似地，单击事件发生在标记上，它处理该事件并将其一直移动到其父标记。因此，当您单击ui按钮时，它将为您提供父标签；当您单击导航栏按钮时，将为您提供父标签，您将了解到被击中的路线。

查看此示例

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>

查找哪个链接导致更改路线

4 个答案: