user1532669 user1532669 - 2 months ago 12
AngularJS Question

Saving a form and reloading state with bootstrap tabs

When I submit a form to save a user profile I want to show the user an alert message to show if the record was saved successfully or not. I have 3 bootstrap tabs and the form I want to save is on the active tab.

I believe the alert isn't displaying because the

$state
needs reloaded. I'm not sure how to do this. If this page was a separate route I could probably do
$state.reload()
or something similar. I can click to a different tab and back and the alert will show.

I've tried:
$state.transitionTo('myprofile', null, {reload: true, notify:true});
No luck with that though.

HTML that displays the alert:

<div ng-if="profilesaved == 'saved'" class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Success!</strong> Your profile has been saved
</div>


The relevant state:

.state('myprofile', {
url: '/my-profile',
templateUrl: 'pages/my-profile.html',
controller: 'MyProfileController as myprofile',
resolve: {
// controller will not be loaded until $requireSignIn resolves
"firebaseUser": ["$firebaseAuthService", function($firebaseAuthService) {
// If the promise is rejected, it will throw a $stateChangeError
return $firebaseAuthService.$requireSignIn();
}]
}
})


The function that sets the DB record.

$scope.submit = function() {
var record = firebase.database().ref().child('myprofile/'+firebase.auth().currentUser.uid)
.set({
name: $scope.profile.name,
address: $scope.profile.address
}

)
.then(function(data) {
console.log('profile saved');
$scope.profilesaved = "saved";


})
.catch(function(error) {
console.log('profile save failed');
$scope.profilesaved = "save-failed";

});
};

Answer

Not sure if this is the best way to solve this but this did the trick:

 .then(function(data) {
    console.log('profile saved');
    $scope.profilesaved = "saved";
    $scope.$apply();
    $timeout(function(){$state.reload();}, 4000);
 })