Question

我注意到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>

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

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

包含文件包含的内容无关紧要，它甚至可以为空，但这会在切换选项卡时将每次单击添加到页面URL中，以添加＃/ tab1，＃/ tab2等。这种情况发生在所有浏览器中，这是不可取的在Chrome上，这也会导致标签图标闪烁，并且在重新加载特定于页面的图标之前，它会显示默认的白色图标。

任何人都有类似的经历吗？为什么添加ng-include会导致这种情况？我也试过没有角度的include（通过使用jQuery.load（））并且没有看到问题。

这可以在独立页面上完全体验，但在我创建的this plnkr page上，虽然看不到网址，但Chrome中的闪烁效果不太明显，但仍然可以在Chrome中看到效果。

Answer 1

网址更改行为来自$location服务，由ng-include使用。因此，您只需在应用中的某处注入$location服务即可重现它。

请参阅此$location guide的它做了什么？部分，导致问题的操作是：

当用户点击页面中的链接时，维护自身与浏览器网址之间的同步

这回答了你的问题＆＃34;为什么添加ng-include会导致这个问题？＆＃34;。

要阻止$location服务更改网址，您可以这样做：

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： http://plnkr.co/edit/4289uwL1mHSRj6oP4dl1?p=preview

希望这有帮助。

Angular ng-包含奇怪的行为 - 导致URL地址更改

1 个答案: