Angular.JS onclick function only called on first click

Question

I am currently working on a small aplication using Angular.JS In my view i have following button

<md-button class="md-primary" ng-click="editUser(user, $event)">Edit</md-button>

the editUser method looks something like this:

$scope.editUser = function (user, $event) {

    $scope.userToEdit = user;

    $mdDialog.show({
            controller: DialogController,
            targetEvent: $event,
            templateUrl: '/js/modules/user/views/edit.tmpl.html',
            parent: angular.element(document.body),
            clickOutsideToClose: true,
            scope: $scope
        })
        .
        then(function (answer) {
            if (answer == "save") {
                for (right in $scope.allSystemRightsStatements) {
                    if ($scope.allSystemRightsStatements[right].selected) {
                        if( $scope.userToEdit.rights==null){
                            $scope.userToEdit.rights = [];
                        }
                        $scope.userToEdit.rights.push($scope.allSystemRightsStatements[right]);
                    }
                }
                $scope.updateUser($scope.userToEdit);
            }
            $scope.userToEdit = {};
        }, function () {
            $scope.userToEdit = {};
        });
};

$scope.updateUser = function (user) {
    //userService.updateUser makes a $http PUT request
    var promise = userService.updateUser(user);
    promise.then(function (result) {
        $mdToast.show(
            $mdToast.simple(result.message)
                .position($scope.getToastPosition())
                .hideDelay(3000)
        );
    }, function (reason) {
        $mdToast.show(
            $mdToast.simple(reason)
                .position($scope.getToastPosition())
                .hideDelay(3000)
        );
    }, function (update) {
    });
};

Now the dialog is nicely shown and the answer function is also called, everything as expected.

However, when I click the button a second time the editUser funciton is not executed. As if the onClick event from the button had been removed at dialog close.

Any help on solving this problem is greatly appreciated, Thanks

your error could be in the ..some small logic part of your code... It could also be due to the fact, that you are calling an async method with $scope.updateUser and then immediatly setting $scope.userToEdit to an empy object. $scope.updateUser might not have had the time to finish what it was intend to do and you set the passed object to an empty object... — ezcoding
– ezcoding, Commented Dec 16, 2015 at 8:56
No console log is empty :-( The update is actually performed correctly (as reflected by the DB). I'll add the small logic for clarification. — bwright
– bwright, Commented Dec 16, 2015 at 9:00
Does DialogController contains a definition of editUser as well? — Lucas Rodriguez
– Lucas Rodriguez, Commented Dec 16, 2015 at 9:14
if you put a console.log(user) right after function (user, $event) {, does it even logs something? — Lucas Rodriguez
– Lucas Rodriguez, Commented Dec 16, 2015 at 9:20

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

As said here

it is probably a good idea to explicitly mention that the scope will be destroyed upon hiding the dialog (so people shouldn't pass a controller's $scope directly).

(regarding the scope you are passing to mdDialog)

So, as the scope is destroyed, angular is not binding your button with any action

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 16, 2015 at 9:29

Lucas Rodriguez

1,2036 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bwright Over a year ago

For clarification: i removed scope: $scope from the $mdDialog.show call and added locals: {user: user, .. other objects}

Collectives™ on Stack Overflow

Angular.JS onclick function only called on first click

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related