angular-ui / ui-router

The de-facto solution to flexible routing with nested views in AngularJS
http://ui-router.github.io/
MIT License
13.56k stars 3.01k forks source link

ui-view not updated at some point while change url very fast #3772

Open onlybye opened 5 years ago

onlybye commented 5 years ago

This issue tracker is for Bug Reports and Feature Requests only.

angularJS: 1.7 My version of UI-Router is: 1.0.17

Bug Report

Current Behavior:

In my project, there is a sideBar which is implemented by $state.go used for change url, and we use lazyload property to load each module. I found that the view will not be updated to the latest state when I click the siderbar very fast to switch url. Due to analysis the trace log and the code of ui-router, I found it is caused by a wrong transition.

when the error occured, the trace log show that there is a A->c transition after A->B;

var activateViews = function (transition) {
    var enteringViews = transition.views('entering');
    var exitingViews = transition.views('exiting');
    if (!enteringViews.length && !exitingViews.length)
        return;
    var $view = transition.router.viewService;
    exitingViews.forEach(function (vc) { return $view.deactivateViewConfig(vc); });
    enteringViews.forEach(function (vc) { return $view.activateViewConfig(vc); });
    $view.sync();
};

so when A-> started, it will try to remove the viewConfig of A , and the viewConfig of B will left in the _viewConfigs;

var matchingConfigPair = function (uiView) {
    var matchingConfigs = _this._viewConfigs.filter(ViewService.matches(uiViewsByFqn, uiView));
    if (matchingConfigs.length > 1) {
        // This is OK.  Child states can target a ui-view that the parent state also targets (the child wins)
        // Sort by depth and return the match from the deepest child
        console.log(`Multiple matching view configs for ${uiView.fqn}`, matchingConfigs);
        matchingConfigs.sort(depthCompare(viewConfigDepth, -1)); // descending
    }
    return { uiView: uiView, viewConfig: matchingConfigs[0] };
};

Because of the extra config of B, the matchingConfigs will contain B and C, and the viewConfig of B will be returned

Expected Behavior:

the transtion's from state will be the last transition's to state.

question:

  1. how to avoid the transition mentioned above(A->B, A->C)
  2. in what situation ,the length of matchingConfigs will be greater than 1(normal situation).
  3. we try to reverse matchingConfigs first before sort it by depth, and it seem to can get the correct viewConfig, is this solution ok?
onlybye commented 5 years ago

@christopherthielen can you have a look at this issue, looking forward to your reply

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues may be reopened.

Thank you for your contributions.

faisalamin77 commented 3 years ago

I am getting the same issue while after upgraded the routing from AngularJS UI Router to UI_Router Angular.

In our case, the child state view does not load when click the link, though the URL does changed. By the way, it does works fine if I use $state.go() method but not the link. Any suggestions please?

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues may be reopened.

Thank you for your contributions.