blocks|key|1963636|text|现在我已经在angular中遇到过几次同样的问题，虽然我已经想出了两个函数解决方案，但它们都像黑客一样，并不是很"angular“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1963637|攻击#1:|offset|length|style|BOLD|1963638|将window.location刷新绑定到链接的click事件。|CODE|1963639|<a+
++href=/external/link.html+
++onclick="window.location+=+'http://example.com/external/link.html';"
>|code-block|syntax|javascript|1963640|这种方法的缺点和问题是相当明显的。|1963641|黑客#2|1963642|设置执行$window.location更改的角度$route。|1963643|//+Route
.when('/external',+{
++templateUrl:+'path/to/dummy/template',+
++controller:+'external'
})

//+Controller
.controller('external',+['$window',+function+($window)+{
++$window.location+=+'http://www.google.com';
}])|1963644|我设想您可以使用$routeParams或查询字符串对其进行扩展，让一个控制器处理所有“外部”链接。|1963645|正如我所说的，这两种解决方案都不是很令人满意，但如果您必须在短期内使其正常工作，它们可能会有所帮助。|1963646|顺便说一句，我真的希望看到Angular支持rel=external支持这种类型的功能，就像jQueryMobile使用它来禁用ajax页面加载一样。|1963647|entityMap^0|0|0|5|0|1|F|O|5|0|0|0|0|4|0|4|G|P|6|0|0|8|C|0|0|M|C|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@$D|1A|E|1B|F|J]|$D|1C|E|1D|F|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1E|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1F|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1J|8|@$D|1K|E|1L|F|J]|$D|1M|E|1N|F|J]]|9|@]|A|$]]|$1|V|3|W|5|M|7|1O|8|@]|9|@]|A|$N|O]]|$1|X|3|Y|5|6|7|1P|8|@$D|1Q|E|1R|F|J]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1S|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1T|8|@$D|1U|E|1V|F|J]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|14|$]]

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:

Bind a <code>window.location</code> refresh to the link's <code>click</code> event.

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

The downside and problems with this approach are fairly obvious.

Hack #2

Setup Angular <code>$route</code>s that perform a <code>$window.location</code> change.

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

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

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

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 <code>rel=external</code> for this type of functionality, much like jQueryMobile uses it to disable ajax page loading.

blocks|key|1817685|text|在你的路线中尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1817686|$routeProvider.otherwise({})|offset|length|style|CODE|1817687|entityMap^0|0|0|S|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

In your routes try:

<code>$routeProvider.otherwise({})</code>

blocks|key|1817720|text|这是关闭所有深度链接的代码。它从rootElement禁用单击事件处理程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1817721|angular.module('myApp',+[])
+++.run(['$location',+'$rootElement',+function+($location,+$rootElement)+{
++++++$rootElement.off('click');
}]);|code-block|syntax|javascript|1817722|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

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

blocks|key|1963056|text|在Angular+1.0.1中添加target="_self"：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1963057|<a+target="_self"+href='/auth/facebook'>Sign+in+with+Facebook</a>|code-block|syntax|javascript|1963058|此功能已记录在案(https://docs.angularjs.org/guide/$location+-搜索“_self”)|1963059|如果你很好奇，可以看看angular源代码(第5365行@+v1.0.1)。只有当!elm.attr('target')为真时，点击劫持才会发生。|1963060|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/guide/$location^0|H|E|0|0|9|16|0|0|15|J|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|N|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Adding <code>target="_self"</code> works in Angular 1.0.1:

<pre><code>&lt;a target="_self" href='/auth/facebook'&gt;Sign in with Facebook&lt;/a&gt;
</code></pre>

This feature is documented (<a href="https://docs.angularjs.org/guide/$location">https://docs.angularjs.org/guide/$location</a> - search for '_self')

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

blocks|key|3544117|text|要解决Nik的答案，如果你有很多链接，并且不想给每个链接添加目标，你可以使用一个指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3544118|Module.directive('a',+function+()+{
++++return+{
++++++++restrict:+'E',
++++++++link:+function(scope,+element,+attrs)+{
++++++++++++element.attr("target",+"_self");
++++++++}
++++};
});|code-block|syntax|javascript|3544119|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

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

blocks|key|1817863|text|为了补充Dragonfly的答案，我找到了一个限制target="_self“属性数量的最佳实践，那就是从不将ng-属性放在标记上。通过这样做，您可以告诉angular，标记中的所有主体都是angular应用程序的一部分。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1817864|如果你在一个不应该受angular影响的静态包装器中工作，那么把你的ng-app属性放在一个div+(或其他元素)上，这个div只包含你的angular应用程序将要工作的位置。这样，您只需将target='_self‘属性放在将成为ng-app元素的子元素的链接上。|1817865|<body>
++++...+top+markup+...
++++<div+ng-app="myApp">
++++++++<div+ng-view></div>
++++</div>
++++...+bottom+markup+...
</body>|code-block|syntax|javascript|1817866|entityMap^0|1M|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

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. 

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.

<pre><code>&lt;body&gt;
 ... top markup ...
 &lt;div ng-app="myApp"&gt;
 &lt;div ng-view&gt;&lt;/div&gt;
 &lt;/div&gt;
 ... bottom markup ...
&lt;/body&gt;
</code></pre>

blocks|key|1963123|text|Fran6co方法的替代方法是禁用$locationProvider中的'rewriteLinks‘选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1963124|$locationProvider.html5Mode({
++++enabled:+true,
++++rewriteLinks:+false
});|code-block|syntax|javascript|1963125|这将完成与调用$rootElement.off('+click+')完全相同的事情，但不会干扰处理应用根元素上的单击事件的其他javascript。|1963126|请参见docs和relevant+source|offset|length|1963127|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/provider/$locationProvider|1|https://github.com/angular/angular.js/blob/master/src/ng/location.js#L843^0|0|0|0|3|4|0|8|F|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]|$K|13|L|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

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

<pre><code>$locationProvider.html5Mode({
 enabled: true,
 rewriteLinks: false
});
</code></pre>

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.

See <a href="https://docs.angularjs.org/api/ng/provider/$locationProvider">docs</a>, and <a href="https://github.com/angular/angular.js/blob/master/src/ng/location.js#L843">relevant source</a>

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

<pre><code>$location.Html5mode(true).hashbang("!");
</code></pre>

What I want to achieve is to get some URLs or <code>&lt;a&gt;</code> 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.

I have this links:

<pre><code>&lt;a href='/auth/facebook'&gt;Sign in with Facebook&lt;/a&gt;
&lt;a href='/auth/twitter'&gt;Sign in with Twitter&lt;/a&gt;
&lt;a href='/auth/...'&gt;Sign in with ...&lt;/a&gt;
</code></pre>

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

Is there any way I can do this?

angular.js link behaviour - disable deep linking for specific URLs

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个启用了HTML5模式的Angular.js应用程序。$location.Html5mode(true).hashbang("!");我想实现的是获得一些URL或<a>标签来执行正常的浏览行为，而不是使用HTML5历史API更改地址栏中的URL，并使用Angular控制器进行处理。我有这个链接：<a href='...

问angular.js链接行为-禁用特定URL的深度链接
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular.js链接行为-禁用特定URL的深度链接EN