Adrian Adrian -4 years ago 145
Javascript Question

$scope.apply is firing "catch" as well as "then"

In Angular 1.6.2 and UI router, I am looking to only show the content of a page once it has been established on the server that the user has the correct role/permissions to access the page.

Without $scope.apply()

catch()
doesnt get fired but for some reason this isnt the case when I have it in there. Without $scope.apply() the vm.showContent variable doesnt seem to update the view as it should.

I am getting no Angular or JS errors so I said I would omit any other relevant code as I assume nothing else is causing an issue.

View/HTML

<div ng-show="data.showContent">
// my html, not to be shown until vm.showContent is true
</div>


Controller

// more JS
var vm = this;
vm.showContent = false;
// more JS
vm.hasRole = function (role, toState, event) {

Auth.hasRole(role).then(function (data) {
vm.showContent = true;
// without this nothing is happening with the view
$scope.apply();
alert('has role'); // firing successfully
}).catch(function () {
alert('does not have role') // firing also if I add $scope.apply();
if (event != false) {
event.preventDefault();
$state.go('no-permission');
}
});
}

Answer Source

Look at the error response value:

//}).catch(function () {
//LOG error response
}).catch(function(errorResponse) {
    console.warn(errorResponse);
    alert('does not have role') // firing also if I add $scope.apply();
    if (event != false) {
        event.preventDefault();
        $state.go('no-permission');
    }
});

The $scope.apply() is likely throwing:

Error: $rootScope:inprog Action Already In Progress

When an error is thrown in a success handler in a promise chain, the $q service skips to the first subsequent rejection handler in the chain.

For more information on the error, see AngularJS Error Reference - $rootScope/inprog

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download