Angular.js поведение ссылок - отключить глубокую привязку для определенных URL-адресов

У меня есть рабочее приложение Angular.js с включенным режимом HTML5.

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

Я хочу добиться того, чтобы некоторые URL-адреса или теги <a> выполняли обычное поведение просмотра вместо изменения URL-адреса в адресной строке с использованием API истории HTML5 и обработки его с помощью контроллеров Angular.

У меня есть ссылки:

<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>

И я хочу, чтобы браузер перенаправлял пользователя на /auth/..., чтобы затем пользователь перенаправлялся в службу проверки подлинности.

Можно ли мне это сделать?

Ответ 1

Добавление target="_self" работает в Angular 1.0.1:

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

Эта функция документирована (https://docs.angularjs.org/guide/$location - поиск "_self" )

Если вам интересно, посмотрите на источник Angular (строка 5365 @v1.0.1). Хитрование кликов происходит только в том случае, если !elm.attr('target') истинно.

Ответ 2

Альтернативой методу Fran6co является отключить опцию rewriteLinks в $locationProvider:

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

Это будет выполняться точно так же, как вызов $rootElement.off('click'), но не будет мешать другому javascript, который обрабатывает события щелчка в корневом элементе приложения.

Смотрите docs и соответствующий источник

Ответ 3

Это код для выключения глубокой связи. Он отключает обработчик события клика из элемента rootElement.

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

Ответ 4

Я столкнулся с той же проблемой несколько раз с angular, и, хотя я придумал два функциональных решения, оба чувствуют себя как хаки и не очень "angular".

Hack # 1:

Свяжите a window.location обновите ссылку click.

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

Недостаток и проблемы с этим подходом довольно очевидны.

Hack # 2

Настройка Angular $route, которые выполняют изменение $window.location.

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

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

Я предполагаю, что вы можете расширить это использование с помощью $routeParams или строк запроса, чтобы один контроллер обрабатывал все "внешние" ссылки.

Как я уже сказал, ни одно из этих решений не является удовлетворительным, но если вы должны получить эту работу в краткосрочной перспективе, они могут помочь.

На стороне примечания, я бы очень хотел увидеть Angular поддержку rel=external для этого типа функциональности, так же как jQueryMobile использует его для отключения загрузки страницы ajax.

Ответ 5

Чтобы отключить ответ Nik, если у вас много ссылок и вы не хотите добавлять цели к каждому из них, вы можете использовать директиву:

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

Ответ 6

В ваших маршрутах попробуйте:

$routeProvider.otherwise({})

Ответ 7

Чтобы добавить к ответу Dragonfly, наилучшей практикой, которую я нашел, чтобы ограничить количество атрибутов target = "_ self", является никогда, поместите атрибут ng-app в тег body. Делая это, вы сообщаете angular, что все в тегах тела являются частью приложения angular.

Если вы работаете в статической оболочке, на которую не должно влиять angular, поместите свой атрибут ng-app в div (или другой элемент), который окружает только то место, в котором будет работать ваше приложение angular В этом случае вам нужно будет только указать атрибут target = '_ self' для ссылок, которые будут дочерними элементами элемента ng-app.

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