Angular 应用中的外部链接 [英] External Links in Angular App

问题描述

我正在将 Angular 合并到现有 Rails 应用的单个页面中.

I'm in the process of incorporating Angular into a single page of an existing rails app.

使用以下内容与页面内的路由完美配合

Everything is working perfectly with the routing within the page using the following

app.config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/services/:id', {
        templateUrl: "/javascripts/angular/templates/service_ui/service.html",
        controller: "ServiceCtrl"
     })

     $locationProvider.html5Mode(true);
});

但是，我想为与 Angular 无关的链接维护正常功能.例如，我们在标头中有许多链接到其他地方的链接，这些链接现在被 angular 路由器捕获.

However, I'd like to maintain normal functionality for links that are not related to Angular. For example, we have a number of links in the header that link elsewhere that are now being caught by the angular router.

我在以下位置找到了一些潜在的解决方案:https://groups.google.com/forum/?fromgroups#!topic/angular/basidvjscRk

I've found some potential solutions at: https://groups.google.com/forum/?fromgroups#!topic/angular/basidvjscRk

但是基本路径方法似乎不起作用..并且 target="_self" 方法相当突兀.有没有更好的方法让 angular 忽略未在 config 函数中指定的路由?

But the base path method doesnt seem to work..and the target="_self" method is rather obtrusive. Is there a better way to let angular ignore routes that aren't specified in the config function?

我知道有一个 .otherwise() 方法，但这似乎又是一个黑客.我错过了什么吗?

I know there is an .otherwise() method but again this seems like a hack. Am I missing something?

非常感谢！

推荐答案

我们有一个相对传统"的 Web 应用程序，因为大多数链接会触发整页重新加载；很少有链接通过 Angular 的路由系统.在我们的模块定义之后，我们有以下内容:

We have a relatively "traditional" web application in that most of the links trigger full page reloads; very few links go through Angular's routing system. Right after our module definition, we have the following:

app.run(function($location, $rootElement) {
  $rootElement.off('click');
});

这会停止 内置拦截点击，Angular 使用它来操纵 URL 等，当您点击链接时；问题是你现在必须手动使用 $location 每当你想让 Angular 做它的 URL 魔法(例如通过一个 ngClick 和一个函数相应地操作 $location).

This stops the built-in interception of clicks that Angular uses to manipulate the URL and such when you click on a link; the catch is that you now have to use $location manually whenever you want Angular to do its URL magic (e.g. via an ngClick and a function that manipulates $location accordingly).

您可以考虑使用 $rootElement.off 结合特殊指令或配置函数，在您检测到包含特定 URL 片段的链接上重新安装此行为.

You may consider using $rootElement.off combined with a special directive or configuration function that re-installs this behavior on links that you detect contain a certain URL fragment.

这篇关于Angular 应用中的外部链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！