角。js链接行为——禁用特定url的深度链接

I have a working Angular.js app with HTML5 mode enabled.

我有一个工作角。支持HTML5模式的js应用。

$location.Html5mode(true).hashbang("!");

What I want to achieve is to get some URLs or <a> tags to do the normal browsing behaviour instead of changing the URL in the address bar using HTML5 history API and handling it using Angular controllers.

我想要实现的是获得一些URL或标记来执行正常的浏览行为，而不是使用HTML5 history API修改地址栏中的URL并使用角度控制器处理它。

I have this links:

我有这个链接:

<a href='/auth/facebook'>Sign in with Facebook</a>
<a href='/auth/twitter'>Sign in with Twitter</a>
<a href='/auth/...'>Sign in with ...</a>

And I want the browser to redirect the user to /auth/... so the user will be then redirected to an authentication service.

我希望浏览器将用户重定向到/auth/…因此，用户将被重定向到身份验证服务。

Is there any way I can do this?

我有办法做这件事吗?

7 个解决方案

#1

117

Adding target="_self" works in Angular 1.0.1:

添加目标="_self"的角度为1.0.1:

<a target="_self" href='/auth/facebook'>Sign in with Facebook</a>

This feature is documented (https://docs.angularjs.org/guide/$location - search for '_self')

这个特性是有文档记录的(https://docs.angularjs.org/guide/$location - search for '_self')

If you're curious, look at the angular source (line 5365 @ v1.0.1). The click hijacking only happens if !elm.attr('target') is true.

如果你好奇，可以看看角源(第5365行@ v1.0.1)。只有当!elm.attr(“target”)为真时才会发生点击劫持。

#2

An alternative to Fran6co's method is to disable the 'rewriteLinks' option in the $locationProvider:

Fran6co方法的另一种选择是在$locationProvider中禁用“rewriteLinks”选项:

$locationProvider.html5Mode({
    enabled: true,
    rewriteLinks: false
});

This will accomplish exactly the same thing as calling $rootElement.off('click'), but will not interfere with other javascript that handles click events on your app's root element.

这将完成与调用$rootElement.off('click')完全相同的任务，但不会干扰处理应用程序根元素上单击事件的其他javascript。

See docs, and relevant source

请参阅文档及相关资料

#3

This is the code for turning off deep linking all together. It disables the click event handler from the rootElement.

这是关闭深层链接的代码。它从rootElement禁用单击事件处理程序。

angular.module('myApp', [])
   .run(['$location', '$rootElement', function ($location, $rootElement) {
      $rootElement.off('click');
}]);

#4

I've run into the same issue a few times now with angular, and while I've come up with two functional solutions, both feel like hacks and not very "angular".

我已经用角来处理过几次同样的问题，当我提出了两个功能性的解决方案时，它们都感觉像是黑客，而不是很“有棱角”。

Hack #1:

黑客# 1:

Bind a window.location refresh to the link's click event.

绑定一个窗口。位置刷新到链接的点击事件。

<a 
  href=/external/link.html 
  onclick="window.location = 'http://example.com/external/link.html';"
>

The downside and problems with this approach are fairly obvious.

这种方法的缺点和问题是相当明显的。

Hack #2

黑客# 2

Setup Angular $routes that perform a $window.location change.

设置执行$窗口的角度$路由。位置的改变。

// Route
.when('/external', {
  templateUrl: 'path/to/dummy/template', 
  controller: 'external'
})

// Controller
.controller('external', ['$window', function ($window) {
  $window.location = 'http://www.google.com';
}])

I imagine that you could extend this using $routeParams or query strings to have one controller handle all "external" links.

我认为您可以使用$routeParams或查询字符串来扩展它，使一个控制器处理所有“外部”链接。

As I said, neither of these solutions are very satisfactory, but if you must get this working in the short term, they might help.

正如我所说的，这两种解决方案都不是很令人满意，但是如果你必须在短期内使其发挥作用，它们可能会有所帮助。

On a side note, I would really like to see Angular support rel=external for this type of functionality, much like jQueryMobile uses it to disable ajax page loading.

另一方面，我希望看到这种类型的功能的角支持rel=external，就像jQueryMobile使用它来禁用ajax页面加载一样。

#5

To work off the Nik's answer, if you have lots of links and don't want to add targets to each one of them, you can use a directive:

为了得到Nik的答案，如果你有很多链接并且不想为每一个添加目标，你可以使用一个指令:

Module.directive('a', function () {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element.attr("target", "_self");
        }
    };
});

#6

To add to Dragonfly's answer, a best practice I have found to limit the number of target="_self" attributes is to never put the ng-app attribute on the body tag. By doing that you are telling angular that everything within the body tags are a part of the angular app.

为了补充蜻蜓的答案，我发现限制target="_self"属性数量的最佳实践是永远不要将ng-app属性放在body标记上。通过这样做，你就告诉了角体标签内的所有东西都是角体应用的一部分。

If you are working within a static wrapper that should not be affected by angular, put your ng-app attribute on a div (or other element) that surrounds only the location your angular app is going to be working in. This way you will only have to put the target='_self' attribute on links that will be children of the ng-app element.

如果您正在一个不受角度影响的静态包装器中工作，请将ng-app属性放在一个div(或其他元素)上，该div(或其他元素)仅包围您的角度应用程序将要工作的位置。这样，您只需将target='_self'属性放在将是ng-app元素子元素的链接上。

<body>
    ... top markup ...
    <div ng-app="myApp">
        <div ng-view></div>
    </div>
    ... bottom markup ...
</body>

#7

In your routes try:

在你的路线:

$routeProvider.otherwise({})

美元routeProvider.otherwise({ })

#1

117