0

I have a one page app which contains the ui.router AngularJS with multiple states links to different parts/code etc. The issue is that inside some of those state html pages I have for example a href="#tip" link that should open a modal that is part of a jQuery code; but what actually happens is that the State ends up changing and going back to my .otherwise("/") page in the state model.

I have noticed that what happens is that the link which is requested is not the correct link with the ui.router url that is currently rendering the page. For example, my app is on example.com/app .. When a state changes the url changes to example.com/app/#/page1 or page2 etc .. When a href="#" link is clicked, the link actually points to example.com/#link instead of what I assume should be example.com/#/page1/#tip or /#/tip considering the way my urls are shown..

How can I fix this to allow the href="#" tags to do and function as they originally did before being placed in states?

Below is my provider setup and a sample sate:

.config(function($stateProvider,$urlRouterProvider,$urlMatcherFactoryProvider){
    $urlRouterProvider.otherwise('/app');
    $urlMatcherFactoryProvider.strictMode(false)
    $stateProvider
.state('flashcards', {
            url: "/page1",
            views: {
                'input-views': {
                    templateUrl: '/page1.html',
                }
            }
        })
});
ten2TEN
  • 1
  • get rid of the href then for the jQuery modal and use a more appropriate data attribute. or at least make sure the default event is prevented when clicked. Not sure why you would put something like that into an angular app. There are lots of different angular modal modules around – charlietfl Sep 20 '15 at 07:19
  • Because some of the href tags are generated by different jQuery plugin libraries so thats why I wanted to find a way around this without having to go in and change the actual plugin everytime their updated or changed. – ten2TEN Sep 20 '15 at 08:02
  • 1
    well to be honest it sounds like you are building your app backwards by incorporating jQuery plugins first before even getting routing working. Especially any plugins that connect to history or url. Should read : [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Sep 20 '15 at 08:20
  • I kind of did build it backwards because It was already a jQuery/php based app and i'v been turning it into AngularJS now and some plugins I simply can't go in and change yet due to time so I was looking for something like a hack if anything. Do you have any suggestions? – ten2TEN Sep 20 '15 at 08:40
  • Not without specifics. Laying angular over top of jQuery heavy app is just asking for problems and is a bad approach in the first place. `document.ready` is virtually worthless and plugins will need to be converted to directives – charlietfl Sep 20 '15 at 08:43

0 Answers0