Search code examples
javascriptangularjsmddialog

Update bindings from $mdDialog


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();
            });
    }

Solution

  • 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.