I am trying to ensure that the content of a page in Angular 1.6.2 and UI router is only displayed once it has been confirmed on the server that the user has the appropriate role/permissions.
It seems like without using $scope.apply(), the catch() function does not get triggered, but for some reason this issue is resolved when I include it. Without $scope.apply(), the vm.showContent variable does not update the view as expected.
I have checked for any Angular or JS errors and found none, so I believe the problem lies specifically with the code provided.
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;
// $scope.apply() is necessary for updating the view
$scope.apply();
alert('has role'); // success message
}).catch(function () {
alert('does not have role') // error message even if $scope.apply() is added
if (event != false) {
event.preventDefault();
$state.go('no-permission');
}
});
}