如何在使用ng-click时允许“在新标签页中打开”？

Question

我有一个关于HTML的表格，每一行都指向一个不同的页面，其中包含有关该行的更多详细信息。但是当我使用angularjs时，使用ng-click我无法右键单击此行并选择“在新选项卡中打开”。有什么办法可以解决吗？

提前致谢！

Answer 1

如果可能，您应该将元素转换为锚元素。

<a ng-href="{{ your dynamic url }}" ng-click="your function">Your link text</a>

浏览器会将元素解释为链接，并为此提供正确的下拉列表。请注意，您还必须在新选项卡中打开正确的href值。

编辑：如果你想要一个关于如何使用JQuery修复这种行为的更详细的答案，我会推荐this question。

Answer 2

在您的ng-click功能中，您可以调用window.open(url, '_blank')作为警告，这取决于浏览器和当前设置。

在某些情况下，这将在弹出窗口中打开，在其他情况下，它将在新选项卡中打开。没有办法强迫任何一种行为，因为javascript是浏览器不可知的，它只是简单地请求一个新的窗口，由浏览器决定如何实现它。 see here for a discussion on forcing a tab or window

但是，如果浏览器看到<a>标记，那么获得右键单击选项或按住ctrl +单击以在新选项卡中打开的唯一方法。否则它不会将其视为链接。

Answer 3

如果你想根据某些条件动态生成你的href那么你可以在href事件上设置你的ng-mousedown，之后你可以执行任何事件，如open link in new tab，open link in new window和click。

HTML：

<a href="javascript:void(0)" ng-mousedown="openDetailView($event, userRole)">{{label}}</a>

JS：

  $scope.openDetailView = function (event, userRole) {
         if(userRole == 'admin') {
             jQuery(event.target).attr('href', 'admin/view');

         } else {
             jQuery(event.target).attr('href', 'user/view');

         }
  };

Answer 4

您必须在表格行中使用锚元素。

HTML

<tr>
    <a ng-href="dynamic url" ng-click="openItem($event)">Open the item</a>
</tr>

调节器

$scope.openItem = function (event) {
    event.preventDefault();
    // code to open a item
}