Calling controller AngularJS from a button in HTML

Question

I need to call the controller deleteMember so to when the user clicks on a button, the member is deleted.

//deleting a member
Members.controller('deleteMember',['$scope','$http',function($scope, $http){
    $scope.deleteMember = function(member){
        $scope.deleteMember="";
        console.log(member);
        var deleteMember=confirm("Sure you want to delete?");

        if(deleteMember){
            $http.post('PHP/deleteMember.php',member).success(
            function(data){
                console.log(data);

                if (data){
                    console.log("Deletion successful"); //delete worked
                }else{
                    console.log("Deletion not successful"); //delete did not work
                }
            });
        };
    };
    }]);

HTML code:

<div class="col-md-2">
                    <td><button type="button" class="btn btn-warning">Delete</button><td> <!--on button click, the member will be deleted-->
                </div>

Is there a way that I can write the name of the controller using HTML?

Thanks for the help :)

Why are you deleting your method on the first line of `deleteMember()`? — Malkus, Jan 04 '16 at 16:47

score 2 · Answer 1 · answered Jan 04 '16 at 16:45

2

You could add the ng-click attribute to the button:

<button type="button" ng-click="deleteMember(member)" class="btn btn-warning">Delete</button>

In this example I assume that the member variable that is passed to the deleteMember method is already in the scope of this button. This would be the case if this button is rendered inside an ng-repeat directive.

For example:

<tr ng-repeat="member in members">
    ...
    <td>
        <button type="button" ng-click="deleteMember(member)" class="btn btn-warning">
            Delete
        </button>
    <td>
</tr>

Also you should probably not shooting yourself into the foot by replacing the deleteMember function with a string because the next time you want to call this method it simply won't work:

$scope.deleteMember = "";

answered Jan 04 '16 at 16:45

Darin Dimitrov

1,023,142
271
3,287
2,928

it still didn't work with the ng-click I have tried it already. Do you think there is another way of how this can be done? – user3569503 Jan 04 '16 at 17:15
By saying `it didn't work` unfortunately it is very hard to be able to help. If you were a little more specific about the exact error you are getting maybe it would be easier to understand the root cause of the issue. – Darin Dimitrov Jan 04 '16 at 17:28
...cause it's not giving me any errors that's way i said that – user3569503 Jan 04 '16 at 17:31
So what doesn't work exactly? Did you debug your code? Did you put breakpoints inside this `deleteMember` method? Is it called? – Darin Dimitrov Jan 04 '16 at 17:33
When clicking the button Delete, a member has to be deleted. Nothing works because the member will still appear. – user3569503 Jan 04 '16 at 17:41
Well in your `deleteMember` function all I can see is an AJAX request to some server endpoint which is supposed to delete the member. But I can't see you updating anywhere the corresponding `$scope` collection to which you are binding your table in order to remove the element. How do you expect the member to disappear if you don't remove the element from this collection? – Darin Dimitrov Jan 04 '16 at 19:42

score 0 · Answer 2 · answered Jan 04 '16 at 17:14

You can simply just call the function deleteMember using ng-click and make sure you pass in the member you want to delete as an argument. You are passing a member in your function as an argument in the controller, so one must also be passed via the HTML. You haven't shown it in your code but I assume you are using ng-repeat to do this.

<div class="col-md-2">
  <td><button type="button" class="btn btn-warning" ng-click="deleteMember(member)">Delete</button><td> <!--on button click, the member will be deleted-->
</div>

You mention calling the controller in the HTML. If you mean your page isn't initiated with the 'deleteMember' controller then you can wrap that block of code using ng-controller to give you access to the deleteMember.

<div class="col-md-2" ng-controller="deleteMember">
  <td><button type="button" class="btn btn-warning" ng-click="deleteMember(member)">Delete</button><td> <!--on button click, the member will be deleted-->
</div>

If you put a debugger at the top of the deleteMember function and open your chrome console, does it even hit the debugger? Or are any of your console.logs appearing? — ThatTobMate, Jan 04 '16 at 23:02

Calling controller AngularJS from a button in HTML

2 Answers2