I'm using an md-switch, which is bound to a scope variable $scope.warningToggle. When I click the switch, it pops up with a confirmation dialog to ask the user to confirm if they really want to toggle the switch. If the user hits cancel or the update fails, I want the switch to revert back to its previous position, but I can't seem to get the binding to update. The showToggleConfirmation function is called on the switch with ng-change. The warningToggle variable will be 0 for off and 1 for on. The revertToggle function just takes in the warningToggle and switches the number. So if it's a 1, it changes it to 0 and vice versa. I've tried several variations of the following:
$scope.showToggleConfirmation = function(event, customer, warningToggle) {
var messageText = toggleMessage(warningToggle);
var confirm = $mdDialog.confirm({
title: 'Confirm',
textContent: messageText,
ok: 'Confirm',
cancel: 'Cancel',
scope: $scope,
preserveScope: true,
parent: angular.element(document.body),
targetEvent: event,
});
$mdDialog.show(confirm).then(
function(answer) {
// Code when response is confirmed
},
function() {
revertToggle();
});
}
So after banging my head on the table for 2 days over this, a friend suggested making the scope variable into an array object, and it worked. So declared
$scope.a = {warningToggle:0};
He said it was likely because of prototypal inheritance. I'm new to Angular and Javascript in general, so I'll need to read on it before I can understand why that worked, but hopefully this can help someone else.