ng-click不触发按钮单击

Question

I am facing weird error where I am not able to call a function on ng-click when button is clicked.

This is the block of code for which the ng-click is not working for delete button but working for edit button.

  <table ng-table="tableParams" class="table table-striped table-bordered Pages_table">
                        <thead>
                            <td><b>Id</b></td>
                            <td><b>Image</b></td>
                            <td><b>Alt</b></td>
                            <td><b>Edit</b></td>
                            <td><b>Delete</b></td>
                        </thead>
                        <tbody>
                            <tr ng-repeat="dat in newData">
                                <td>((dat.id))</td>    
                                <td class="clients_review_admin_item"><img src="((imagePath+'/'+dat.image))" alt="" style="height:100px;width:150px" /></td>
                                <td>((dat.alt))</td>                                                    
                                <td><button type="button" class="btn btn-info rounded-buttons" data-toggle="modal" data-target="#editWhy" ng-click="editWhy(dat)" ><i class="fa fa-pencil"></i></button></td>
                                <td>
                            <button class="btn btn-danger rounded-buttons" type="button"   ng-click="deleteFooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

The Javascript function deleteFooter

$scope.deleteFooter = function(id,name){
console.log("called");
     var postUrl = apiUrl+"/delfriendfooter";
      var $inputs = {
         id:id,
         token:$scope.token,
      };
     var func = function(){
                 $http.post(postUrl, $inputs).
                   success(function(data, status, headers, config) {        
                         swal("Deleted!", name+" has been deleted!", "success");     
                         var dat = $scope.newData;
                         for(var i=0,len= dat.length;i<len;i++){
                             if(dat[i].id==id){
                                 dat.splice(i,1);
                                 break;
                             }
                         }                                                                  
                   }).
                   error(function(data, status, headers, config) {        
                     sweetAlert("Oops!!", "Please try again!!", "error");
                   });
     }

 $scope.deletePopUp(func,name);                       

};

The weird thing is that it is working for the edit functionality

 <td><button class="btn btn-info rounded-buttons" data-toggle="modal" data-target="#editWhy" ng-click="editWhy(dat)" ><i class="fa fa-pencil"></i></button></td>

I have also tried to call other functions but it is just not firing.

Note: I have changed the angular braces to (()).

Answer 1

This is happening because of the way angular / buttons / forms work .

Specifically:

To prevent double execution of the handler, use only one of the ngSubmit or ngClick directives. This is because of the following form submission rules in the HTML specification:

• If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
• If a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
• If a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] ( ngClick ) and a submit handler on the enclosing form ( ngSubmit )

Because of these rules, buttons can behave a little strangely.

A solution is to add type="button" to your buttons. This will basically prevent these rules from being applied:

<button type="button" class="btn btn-danger rounded-buttons"  ng-click="deleteFooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>

Angular will then, instead of using the form standards to decide what function to call, simply execute the ng-click 's function.

Answer 2

The problem is that i guess deleteFooter function and it's ng-click is called on different scopes. Both are defined in your controllers scope, and its fine. But i suppose, as You wrote, that you call deleteFooter in ng-repeat, which has its own scope.

Use $parent to enforce your controller scope on deleteFooter.

<button class="btn btn-danger rounded-buttons"  ng-click="$parent.deleteFooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>

Answer 3

Ok so after so many efforts I opted for jquery ajax method and applied the changes using angular $apply to the scope variable. I am still not sure what is wrong.