angularjs ng-click breacks after second click

Question

to show you my problem, here a link

http://codepen.io/destroy90210/pen/adbCy

if you click on the button the first time it fades up and the form will be shown, if i click on reset then the form get closed, but now if i want to open it again nothing happens, it seems that the function "openForm()" never get called again.

does anybody knows why??

Answer 1

Your function and bool have the same name, $scope.openForm You are overriding the function to false on the close event (as well as true on the open).

$scope.openForm = false;            // <--- $scope.openForm is being set to a bool
$scope.openForm = function() {      // <--- $scope.openForm is being set to a function
    $scope.openForm = true;         // <--- $scope.openForm is being set to a bool
    console.log($scope.openForm);
}

$scope.closeForm = function() {
    $scope.openForm = false;        // <--- $scope.openForm is being set to a bool
    console.log($scope.openForm);
}

Solution, use a different name for the bool

$scope.isFormOpen = false;
$scope.openForm = function() {
    $scope.isFormOpen = true;
    console.log($scope.isFormOpen);
}

$scope.closeForm = function() {
    $scope.isFormOpen = false;
    console.log($scope.isFormOpen);
}

Demo: http://codepen.io/anon/pen/tGwAI