Fatal编程技术网
  • angularjs/
  • Angularjs angular.js链接行为-禁用特定URL的深度链接

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

angularjs

Angularjs angular.js链接行为-禁用特定URL的深度链接,angularjs,Angularjs,我有一个启用HTML5模式的Angular.js应用程序 $location.Html5mode(true).hashbang("!"); 我想要实现的是获得一些URL或 我希望浏览器将用户重定向到/auth/…，这样用户将被重定向到身份验证服务 有什么办法可以做到这一点吗？我在angular上也遇到过几次同样的问题，虽然我提出了两种功能解决方案，但都感觉像黑客，不是很“angular” Hack#1: 绑定窗口。位置刷新链接的单击事件 <a href=/external/lin

我有一个启用HTML5模式的Angular.js应用程序

$location.Html5mode(true).hashbang("!");
我想要实现的是获得一些URL或
我希望浏览器将用户重定向到
/auth/…
，这样用户将被重定向到身份验证服务

有什么办法可以做到这一点吗？

我在angular上也遇到过几次同样的问题，虽然我提出了两种功能解决方案，但都感觉像黑客，不是很“angular”

Hack#1:

绑定
窗口。位置
刷新链接的
单击事件


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


我设想您可以使用
$routeParams
或查询字符串来扩展此功能，使一个控制器处理所有“外部”链接

正如我所说的，这两种解决方案都不是很令人满意，但如果你必须在短期内实现这一目标，它们可能会有所帮助

另一方面，我非常希望看到这种类型功能的角度支持，就像jQueryMobile使用它来禁用ajax页面加载一样。
在您的路线中，请尝试：


$routeProvider。否则（{}）
这是关闭所有深度链接的代码。它从rootElement禁用click事件处理程序


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


添加
target=“\u self”
在Angular 1.0.1中工作：


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






此功能已记录（-search for'\u self'）


如果你好奇的话，看看角度源（第5365行@v1.0.1）。只有在
的情况下才会发生点击劫持！elm.attr（'target'）
是正确的。
要解决Nik的答案，如果您有很多链接，并且不想在每个链接中添加目标，可以使用以下指令：


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



为了补充蜻蜓的答案，我发现限制target=“\u self”属性数量的最佳实践是从不将ng app属性放在body标签上。这样做就是告诉angular，body标签中的所有内容都是angular应用程序的一部分

如果您在不受angular影响的静态包装器中工作，请将ng app属性放在仅围绕angular app将要工作的位置的div（或其他元素）上。这样，您只需将target=''u self'属性放在将成为ng app元素的子元素的链接上


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




... 顶部标记。。。
... 底部标记。。。

Fran6co方法的替代方法是禁用$locationProvider中的“重写链接”选项：


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


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


请参阅，并且
我希望看到
rel=external
也能正常工作。在那之前，我将使用黑客2。我会很快将你的答案标记为接受，但我想再等一段时间，看看是否有人以一种更为狭隘的方式解决了这个问题。非常感谢。我也有类似的想法，特别是使用
$window.location
在
html5mode=true
中强制刷新页面-这在Webkit浏览器中无法正常工作；明确使用
target=\u self
。不起作用。只有当我使用Noah答案中的外部控制器时，这是一个很好的解决方案，适用于混合MVC/Angular站点，其中一些链接指向一个迷你SPA，被Angular route config拦截，而其他链接则用于常规MVC页面请求。在我的例子中，常规链接一直工作到加载角度控制器（当使用SPA时），此时常规MVC链接被劫持，并且没有响应。所以向上投票。无论你把
$location
放在什么地方，你都需要这样做：例如
.controller（'fooController'，function（$location）{}）
你需要删除像
.controller（'fooController'，function（$element，$location）{$element.off（'click'）；}）这样的事件。谢谢，我使用pushstate在页面上应用过滤器时设置url。有了它，我可以使用
$location.search（）
，并且仍然可以正常使用
标记。（无需应用
target=“\u self”everywhere
）我在Angular和Node/Express混合应用程序中遇到了这一点，效果非常好。谢谢这最初是有效的，但经过进一步测试，它产生了意想不到的副作用。在混合角度/纯jQuery页面上，一个听起来很正确的
“$locationWatch希望首先更新$location服务，然后更新浏览器。但是当我直接将state按到浏览器[或者在我的情况下导航到#]时，$location服务仍然有旧的url。”我不得不继续寻找替代方案。使用angular 1.2.16和当前master时，可能必须使用此选项来启用过渡期，同时将rails路由转换为angular路由。这会导致我在使用angular和TurboLink时重新加载整页。这对我不起作用，但@Fran6co几乎可以（请参阅我的评论）。我正在加载应用程序的页面上运行它，但没有控制器将锚定标记所在的树作为目标。对于这个答案+1。直到我在$locationProvider上启用HTML5模式，问题才首先出现。

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



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