UI Router Refreshing Page Instead on State Change

2019-09-14 19:46发布

问题:

I've had no luck with this particular issue. Everything I've looked up has to do with people having issues 'trying' to refresh the page instead of my issue where it's refreshing every time I go to a certain state. This ONLY happens in IE not chrome.

Code:

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('box', {
            templateUrl: templatePath + 'box.html',
            controller: 'BoxController',
            controllerAs: 'box',
            url: '/Box/{folder:string}'
        })
        .state('compose', {
            templateUrl: templatePath + 'compose.html',
            controller: 'ComposeController',
            controllerAs: 'compose',
            url: '/Compose/{messageSentId:int}'
        })
        .state('view', {
            templateUrl: templatePath + 'view.html',
            controller: 'ViewController',
            controllerAs: 'view',
            url: '/Box/{folder:string}/{messageId:string}/{messageSentId:string}'
        });

    $urlRouterProvider.otherwise('/Box/');
});

The problem is with my compose state. If I go directly to that state like so:

vm.compose = function () {
   $state.go('compose', { messageSentId: 0 }, { notify: true });
};

It works just fine. However, if I add a different number besides 0 and call from a different controller it does not work:

vm.reply = function() {
   var id = Math.floor($stateParams.messageSentId);
   $state.go('compose', { messageSentId: id }, { notify: true });
};

I thought maybe it was having issues because it thought id was a string and therefore didn't match to /Compose/{messageSentId:int} so I added the Math.floor() but that didn't help.

Something to note is that if I fire my compose function first and go to that state the reply function will work. However, if I attempt to navigate with my reply function first the page reloads.

Another thing that I can confirm is that my controller for that page and the page itself loads just fine. You can actually see the form pop up briefly. The problem is once the controller has loaded a refresh is triggered. No errors. No nothing. Simply fails in IE.

回答1:

After many hours of research and having found nothing similar to my issue on the web I made a simple change. I moved my state change out of my controller and used ui-sref instead:

Code:

<div class="btn-group pull-right" ng-if="view.canReply()">
    <a class="btn btn-primary" ui-sref="compose({messageSentId: view.replyMessageId})">
        <i class="fa fa-reply"></i> Reply
    </a>
</div>

Where 'view' is my controllerAs since I don't use $scope and I set my $stateparameter on the variable replyMessageId. Maybe this will help someone.