Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

I have .when('/center', '/center/question') in my angular web app.

When I type '/center' in my browser it will redirect to '/center/question' as I expect but when I click the <a ui-sref="center" href="#/center"></a>, it won't redirect and just stay on the url '/center'.

There is no error in my console and I don't know why.

I see one similar issue here Angular UI-Router $urlRouterProvider .when not working anymore.I try the answer but it still don't work for me.

Here is my coffeescript code:

whenConfig = ['$urlRouterProvider', ($urlRouterProvider) ->
  # default url config

  $urlRouterProvider
  .otherwise '/center'
  .when '/center', '/center/question'
]

stateConfig = ['$stateProvider', ($stateProvider) ->
  # nested url config

  capitalize = (s)->
    s[0].toUpperCase() + s[1..]

  mainConfig = ({
    name: name
    url: "/#{name}"
    templateUrl: "templates/#{name}.html"
    controller: "#{capitalize name}Ctrl"
  } for name in ['center', 'keywordList', 'keywordConfig', 'log', 'stat'])

  centerConfig = ({
    name: "center.#{name}"
    url: "/#{name}?page"
    templateUrl: "templates/center/#{name}.html"
    controller: "Center#{capitalize name}Ctrl"
  resolve:
    thead: (CenterService) ->
      CenterService.getThead @self.name
    data: (CenterService, $stateParams) ->
      CenterService.fetchItems @self.name, $stateParams.page
  } for name in ['question', 'answer', 'comment', 'article'])

  for singleConfig in mainConfig
    $stateProvider.state singleConfig

  for childConfig in centerConfig
    $stateProvider.state childConfig
]

app.config whenConfig
app.config stateConfig
like image 245
J22Melody Avatar asked Nov 25 '14 06:11

J22Melody


People also ask

What does ui-sref do?

A ui-sref is a directive, and behaves similar to an html href . Instead of referencing a url like an href , it references a state. The ui-sref directive automatically builds a href attribute for you ( <a href=...> </a> ) based on your state's url.

What is ui-sref active in AngularJS?

ui-sref-active can live on the same element as ui-sref / ui-state , or it can be on a parent element. If a ui-sref-active is a parent to more than one ui-sref / ui-state , it will apply the CSS class when any of the links are active.

What is the difference between ngRoute and ui-router?

The ui-router is effective for the larger application because it allows nested-views and multiple named-views, it helps to inherit pages from other sections. In the ngRoute have to change all the links manually that will be time-consuming for the larger applications, but smaller application nrRoute will perform faster.

What is urlRouterProvider otherwise?

The otherwise with $urlRouterProvider will redirect all the other routes to the home page. In practical, you will show an 404 template for this one. You can replace template by tempateUrl if you want to separate the HTML template. // app.jsapp.config(function($stateProvider, $urlRouterProvider){


2 Answers

There is a new working plunker (extending the Angular UI-Router $urlRouterProvider .when not working *anymore*), which should be working with the version 0.2.13+

Previous solution

Until version 0.2.12- we could use $urlRouterProvider.when(), suggested in documenation (small cite):

How to: Set up a default/index child state

...
if you want the 'parent.index' url to be non-empty, then set up a redirect in your module.config using $urlRouterProvider:

 $urlRouterProvider.when('/home', '/home/index');

So this was solution shown in the Q & A mentioned above:

var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];
...
app.config(whenConfig) 

Now - we cannot.

UI-Router "FIX" in 0.2.13

It is due to "FIX" (which I am simply not sure about), mentioned in the release 0.2.13

Bug Fixes
$state:
- ...
- Avoid re-synchronizing from url after .transitionTo (b267ecd3, closes #1573)

And here is the new code added in the urlRouter.js:

if (lastPushedUrl && $location.url() === lastPushedUrl)
 // this line stops the corrent .when to work
 return lastPushedUrl = undefined;

lastPushedUrl = undefined;

This piece of code is optimizing/fixing some other issue ... but also, turning off the .when() functionality

SOLUTION

As already mentioned, this brand new plunker shows the way with version 0.2.13+. We just have to listen to state change, and if the state is "app.list" we can go to its detail with some id...

var onChangeConfig = ['$rootScope', '$state',
 function ($rootScope, $state) {

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name === "app.list") { 
      event.preventDefault();
      $state.go('app.list.detail', {id: 2});
    }
  });

}]

Check the plunker here

like image 99
Radim Köhler Avatar answered Oct 16 '22 22:10

Radim Köhler


You can do this in your controller too. I think it is cleaner than listening to state changes.

Example:

.controller 'YourControllerName', ($scope, $state) ->
    $state.go "center.question" if $state.is "center"
like image 21
Roi Avatar answered Oct 17 '22 00:10

Roi