从 HTML 中的按钮调用控制器 AngularJS答案

【问题标题】：Calling controller AngularJS from a button in HTML从 HTML 中的按钮调用控制器 AngularJS
【发布时间】：2016-01-04 16:42:58
【问题描述】：

我需要调用controller deleteMember，以便当用户单击按钮时，该成员被删除。

//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 代码：

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

有没有一种方法可以使用 HTML 编写控制器的名称？

感谢您的帮助:)

【问题讨论】：

像这样添加ng-click事件：
为什么要删除deleteMember()第一行的方法？
@rubchick 已经尝试过了，但是没有用

标签： javascript html angularjs button controllers

【解决方案1】：

您可以将ng-click 属性添加到按钮：

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

在此示例中，我假设传递给deleteMember 方法的member 变量已经在此按钮的范围内。如果此按钮在 ng-repeat 指令中呈现，就会出现这种情况。

例如：

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

此外，您可能不应该将deleteMember 函数替换为字符串，因为下次您想调用此方法时它根本不起作用：

$scope.deleteMember = "";

【讨论】：

它仍然无法与我已经尝试过的 ng-click 一起使用。您认为还有其他方法可以做到这一点吗？
通过说it didn't work 不幸的是，很难提供帮助。如果您更具体地了解您遇到的确切错误，可能会更容易理解问题的根本原因。
...因为它没有给我任何错误，就像我说的那样
那么什么不完全有效？你调试过你的代码吗？您是否在此 deleteMember 方法中设置了断点？叫吗？
单击删除按钮时，必须删除成员。没有任何效果，因为该成员仍会出现。

【解决方案2】：

您可以简单地使用 ng-click 调用函数 deleteMember 并确保将要删除的成员作为参数传递。您将函数中的成员作为控制器中的参数传递，因此也必须通过 HTML 传递。您尚未在代码中显示它，但我假设您正在使用 ng-repeat 来执行此操作。

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

您提到在 HTML 中调用控制器。如果您的意思是您的页面不是使用“deleteMember”控制器启动的，那么您可以使用 ng-controller 包装该代码块，以便您可以访问 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>

【讨论】：

如果你在 deleteMember 函数的顶部放置一个调试器并打开你的 chrome 控制台，它甚至会命中调试器吗？还是您的任何 console.logs 出现了？