CODEWITHSUNDEEP
javascriptangularjspushstate
SubnetOne
SubnetOne

Reputation: 51

AngularJS :: html5Mode + normal link behavior

I am quite new to angular and currently facing a problem on a website, where we need html5Mode(true) while at the same time keep normal links working like they would do with html5Mode(false).

We have our ng-app in the html-tag - so the whole page is under controll of a module. On some pages we need to load new content via ajax and a change of the underlying model in the specific controller. This should change the URL to a new (absolute) one. Achieving this is kind of simple by $locationProvider.html5Mode(true); in the module-config.

Now the Problem: as we activate html5Mode, normal links would not work as expected any more. Is there any way to achieve the desired behavior without fragmenting the page into multiple modules that kind of leave the "normal links" out of the scope of angular and the html5Mode-setting of the module?

I had the idea to simply use history.pushState() in the controller-function, that handles the click-event for the content-reload, but this does throw a lot of exceptions on the one hand and does not even work properly on the other hand.

Any idea is very much appreciated :-)

Best regards, SubnetOne

Upvotes: 1

Views: 511

Answers (1)

SubnetOne
SubnetOne

Reputation: 51

Finally I found the solution:

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

This ads a target="_self" to all links (anchor-tags) on the page. Due to angulars hijacking of links depends on 

!elm.attr('target') = true

links WITH a target will behave like intended.

Thanks to Niks answer to angular.js link behaviour - disable deep linking for specific URLs and Sebastians answer to Conditionally add target="_blank" to links with Angular JS I finaly solved the issue :-)

Upvotes: 4

Related Questions