Angularjs 包括导致URL地址更改的奇怪行为_Angularjs

Angularjs 包括导致URL地址更改的奇怪行为

angularjs

Angularjs 包括导致URL地址更改的奇怪行为,angularjs,Angularjs,我注意到ng include的一个奇怪行为——在某些情况下，它会对浏览器产生奇怪的副作用这是一个页面，其中包含一个简单的twitter引导选项卡窗格 <body> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a h

我注意到ng include的一个奇怪行为——在某些情况下，它会对浏览器产生奇怪的副作用

这是一个页面，其中包含一个简单的twitter引导选项卡窗格

<body>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">AAA</div>
        <div class="tab-pane" id="tab2">BBB</div>
    </div>
</body>






AAA
BBB

现在，如果我在页面的任何位置添加ng include，例如在页面的开头：

<body>
    <ng-include src="'page1.html'"></ng-include>
    ...

...

不管包含的文件包含什么，它甚至可以是空的，但这将导致切换选项卡时每次单击都会将#/tab1、#/tab2等添加到页面URL。这在所有浏览器中都会发生，这是不可取的。在Chrome上，这也会导致选项卡图标闪烁，在重新加载页面特定图标之前，它会显示默认的白色图标

有人经历过类似的事情吗？为什么添加ng include会导致这种情况？我还尝试了在没有角度的情况下进行include（通过使用jQuery.load（）），没有发现任何问题

这可以在独立页面上完全体验到，但在我创建的页面上，虽然看不到URL，而且Chrome中的闪烁效果不太明显，但仍然可以在Chrome中看到。URL更改行为来自

$location

服务，该服务由

ng include

使用。因此，您只需在应用程序中的某个位置注入

$location

服务，就可以复制它

请参阅本节的它的作用是什么？部分，导致问题的操作是：

当用户单击页面中的链接时，保持自身与浏览器URL之间的同步

这将回答您的问题“为什么添加ng include会导致这种情况？”

要防止

$location

服务更改url，您可以这样做：

appModule.run(function ($rootScope) {
  $rootScope.$on('$locationChangeStart', function ($event, newUrl, oldUrl) {
    // may add some logic here to prevent url changes only that come from clicking tab.
    $event.preventDefault();
  });
})

示例plunker:

希望这能有所帮助。

您能告诉我们确切的url名称页面是否正确，url是否正确等。如果没有激活Javascript来处理点击，这将是正常的，因为这些url有a href链接。但是，所有Javascript文件都正常加载，并且都正常工作，直到添加了ng include，才能设置plunker。。您可以使用$location.path（）&$location.hash（）@HarishR打印url。上面的帖子中已经包含了plunker，但是很难看到它。是的，没有ng include，在其中一个控制器中注入$location，我也可以复制它。因此，$location服务正在为页面上的所有链接注册点击事件！这可能会造成微妙的不期望的效果，如上面所述，再加上其他库（在本例中是twitter引导）好的，在做了一些研究后，我发现这种行为是可以防止的，请查看编辑后的答案。