I have the following controller which is executed on page load and changes the value and state of a submit button. Full example can be seen here, and is based upon this question.
app.controller('FormSubmitCtrl', function($scope, $rootScope, $timeout) {
$scope.loading = false;
$scope.load = function($event) {
$rootScope.event_target = $event.target;
$scope.loading = true;
$timeout(function() { $scope.loading = false; }, 5000);
}
});
app.directive('disabler', function($compile, $rootScope) {
return {
link: function(scope, elm, attrs) {
//var btnContents = $compile(elm.contents())(scope);
scope.$watch(attrs.ngModel, function(value) {
if (value) {
scope.initial_value = elm.attr('value');
if (elm.attr('name') == $rootScope.event_target.name){
elm.attr('value', scope.$eval(attrs.disabler));
setTimeout(function(){
elm.attr('disabled',true);
}, 0);
}
} else {
//elm.html('').append(btnContents);
if (typeof $rootScope.event_target != "undefined"){
//server did not respond in timeline fashion .. inform user
if (elm.attr('name') == $rootScope.event_target.name){
elm.attr('value', scope.initial_value);
elm.attr('disabled',false);
}
}
}
});
}
}
});
form.html
<input id="submit_item_button" name="form2_submit_btn1" type="submit" value="Go" class="btn" disabler="'Loading..'" ng-model="loading" ng-click="load($event)"/>
If the user successfully submits a form on the page, the user will be re-directed by the server to another page. If the user now immediately uses the history back button to re-enter the page, the controller is not entered anymore. This is an issue because the controller above changes the scope variable loading to true and if the user goes back he will still see the button showing the value "loading".
If the controller would be entered at history back the loading variable would be set to false and the button would show the initial, and correct value.
By accident I discovered that when I include (only include, no method call to it..!) the jquery address plugin (paste bin code) the controller is entered on history back, the loading variable is set to false and the submit buttons shows the correct value, not the loading.. value. Thus it seems as the address plugin triggers some event, which in turn triggers the angular controller. As I do not need the address plugin anymore I want to get rid of it, and especially I want to understand what is going on.
My question is now: How can I tell angular to re-enter a controller if the user enters the page through using the history back button in his browser!?
Update: I experience this issue only in Safari on OSX. Using Chrome the controller is also entered on history back, which is the expected behaviour. See the example setup by Thom Porter: http://so.thomporter.com/force-angular-to-re-enter-controller-on-history-back/