У меня есть рабочее приложение 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/..., чтобы затем пользователь перенаправлялся в службу проверки подлинности.
Можно ли мне это сделать?
Добавление 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') истинно.
Альтернативой методу Fran6co является отключить опцию rewriteLinks в $locationProvider:
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
Это будет выполняться точно так же, как вызов $rootElement.off('click'), но не будет мешать другому javascript, который обрабатывает события щелчка в корневом элементе приложения.
Смотрите docs и соответствующий источник
Это код для выключения глубокой связи. Он отключает обработчик события клика из элемента rootElement.
angular.module('myApp', [])
.run(['$location', '$rootElement', function ($location, $rootElement) {
$rootElement.off('click');
}]);
Я столкнулся с той же проблемой несколько раз с 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.
Чтобы отключить ответ Nik, если у вас много ссылок и вы не хотите добавлять цели к каждому из них, вы можете использовать директиву:
Module.directive('a', function () {
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.attr("target", "_self");
}
};
});
В ваших маршрутах попробуйте:
$routeProvider.otherwise({})
Чтобы добавить к ответу 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>