Ng-href Failed to load webpage with error: The URL can’t be shown

1

I have a strange problem. I have a state defined:

$stateProvider.
.state('offer', {
    url: '/personas/:type?tab',
    templateUrl: 'js/personas/offer.html'
  });

and then in some templates, I have links to this state:

<a ng-href="/#/personas/qm?tab=challenges&amp;challenge=-1" class="option" ng-click="toggleDropdown()">Quality Manager</a>
<a ng-href="/#/personas/pm?tab=challenges&amp;challenge=-1" class="option" ng-click="toggleDropdown()">Production Manager</a>

When I test application on desktop, they work as expected. However, when I test application on iPad I get an error in XCode:

Failed to load webpage with error: The URL can’t be shown

I don’t get it. I can’t use ng-href ?

2

url: ‘/personas/:type?tab’,

should be written in
url: ‘/personas/:type/tab’,

Do not use the /-notation with the good old ?-notation of state parameters.
inform you first:

3

@bengtler Why can’t I use search params in states ? This is allowed by ui-router. Even if I change:

$stateProvider
.state('offer', {
    url: '/personas/:type/:tab',
    templateUrl: 'js/personas/offer.html'
  });

and links:

<a ng-href="/#/personas/qm/challenges?challenge=-1" class="option" ng-click="toggleDropdown()">Quality Manager</a>

I still get this error:

Failed to load webpage with error: The URL can’t be shown
4

Try using the ui-sref directive and adding the challenge parameter in the url.

$stateProvider.state('offer', {
  url: '/personas/:type?tab&challenge',
  templateUrl: 'js/personas/offer.html'
});

.

<a ui-sref="offer({ type: 'qm', tab: 'challenges', challenge: -1 })" class="option" ng-click="toggleDropdown()">Quality Manager</a>
5

yeah but i am not a friend of mixing things.
and if you have a challenge parameter you need to define it

6

@joseadrian Yes, I also tried:

$stateProvider.state('offer', {
  url: '/personas/:type?tab&challenge',
  templateUrl: 'js/personas/offer.html'
});

and used ui-sref and then it works. But I don’t want to put challenge in a definition of state. This is because if the value of challenge params changed, Ionic makes the animation of views which I don’t want. I would like to manipulate the challenge value without changing the state.

I still don’t get it why on desktop this ng-href works and in the webview it doesn’t.

7

Hey there,

if you want to manipulate only a state parameter like challenge you can use the notify option of ui-router:


This will not reload the controller and not triggering the state-change events. -> no animation between that views.

Then i would do something like this:
use ng-click instead of ui-sref or ng-href
the function will do a state.go(); and set the notifiy flag to false.
After that you have to reexecute some code in your controller if needed -> like getting the new challenge id from stateParams and load data…

8

@bengtler Ok, thanks for tips! I’ll check that.