I am currently building a WordPress site which has a few interactive bits using AngularJS. Everything works fine, however, when I go to a page which corresponds to my Angular routing setup, the rest of the links on the site then fail to work.
<div ng-app="myApp" class="ng-view">
<ng-view></ng-view>
</div>
… my view is as follows:
<div class="row" ng-controller="LinksCtrl" ng-init="init()">
... rest of view ...
</div>
… any my routing is set up as follows:
$locationProvider.html5Mode(true);
$routeProvider.when('/links/', {
templateUrl: APP_SETTINGS.baseUrl + '/assets/js/views/links.html',
controller: 'LinksCtrl'
});
So, when I navigate around the site, all works OK, but when I then go to /links/, the page (and all Angular app related stuff works and loads), but the rest of the links in the site then fail to load.
So firstly, I am not sure I have to have the controller defined in both the view and routes, and secondly, surely the page should just init without routing? If I disable routing, non of the Angular view displays.
I guess my question should be as to whether or not this is actually possible.
Any help much appreciated.
Cheers,
Dave
The solution found here has worked for me. https://stackoverflow.com/a/17407179/102086.
Basically, you just need to add a target of “_self”. Top the links you want ignored.