AngularJS单表单多按钮共用ng-submit函数失效问题排查

你遇到的问题核心有两个：

• 你在cruduser()函数开头就把所有按钮状态重置为false，这会直接覆盖掉ng-click设置的true值——因为ng-click是在表单提交前触发的，但函数执行时第一步就把变量清掉了，自然判断不到点击状态。
• 你在函数里用this访问按钮变量，但在AngularJS的控制器中，this默认并不等于$scope，而ng-click设置的addButton这些变量是挂载在$scope上的，所以两者指向的不是同一个变量，这也会导致判断失效。

下面给出两种简洁可行的解决方案：

方案一：通过统一状态变量管理操作类型 #

修改后的HTML代码 #

<form name="formUser" ng-submit="cruduser()" role="form"> 
    <!-- 文本字段省略 -->
    <div class="form-actions"> 
        <button type="submit" ng-click="setAction('add')" ng-disabled="formUser.$invalid || dataLoading" class="btn btn-danger">Add</button> 
    </div> 
    <br/> 
    <div class="form-actions"> 
        <button type="submit" ng-click="setAction('read')" ng-disabled="formUser.$invalid || dataLoading" class="btn btn-danger">Read</button> 
    </div> 
    <br/> 
    <div class="form-actions"> 
        <button type="submit" ng-click="setAction('update')" ng-disabled="formUser.$invalid || dataLoading" class="btn btn-danger">Update</button> 
    </div> 
    <br/> 
    <div class="form-actions"> 
        <button type="submit" ng-click="setAction('delete')" ng-disabled="formUser.$invalid || dataLoading" class="btn btn-danger">Delete</button> 
    </div>
</form>

修改后的JS代码 #

'use strict';
angular.module('admin')
.controller('AdminController', ['$scope', '$rootScope', '$location', 'AdminService', function ($scope, $rootScope, $location, AdminService) {
    // 初始化当前操作类型
    $scope.currentAction = null;

    // 设置当前操作
    $scope.setAction = function(action) {
        $scope.currentAction = action;
    };

    $scope.cruduser = function() {
        switch($scope.currentAction) {
            case 'add':
                console.log('Add');
                // 这里调用AdminService的添加方法，比如 AdminService.addUser($scope.formData)
                break;
            case 'read':
                console.log('Read');
                // 调用查询方法，比如 AdminService.getUser($scope.userId)
                break;
            case 'update':
                console.log('Update');
                // 调用更新方法，比如 AdminService.updateUser($scope.formData)
                break;
            case 'delete':
                console.log('Delete');
                // 调用删除方法，比如 AdminService.deleteUser($scope.userId)
                break;
            default:
                console.log('No action selected');
        }
        // 操作完成后重置状态
        $scope.currentAction = null;
    };

    $scope.redirect = function() {
        $rootScope.sessionValue = ' ';
        window.location = "/#/login";
    }
}]);

方案二：直接在点击时传递操作类型（更简洁） #

这种方式不需要额外的状态管理函数，直接把操作类型作为参数传递给提交函数：

修改后的HTML代码 #

<form name="formUser" ng-submit="cruduser(currentAction)" role="form"> 
    <!-- 文本字段省略 -->
    <div class="form-actions"> 
        <button type="submit" ng-click="currentAction='add'" ng-disabled="formUser.$invalid || dataLoading" class="btn btn-danger">Add</button> 
    </div> 
    <br/> 
    <div class="form-actions"> 
        <button type="submit" ng-click="currentAction='read'" ng-disabled="formUser.$invalid || dataLoading" class="btn btn-danger">Read</button> 
    </div> 
    <br/> 
    <div class="form-actions"> 
        <button type="submit" ng-click="currentAction='update'" ng-disabled="formUser.$invalid || dataLoading" class="btn btn-danger">Update</button> 
    </div> 
    <br/> 
    <div class="form-actions"> 
        <button type="submit" ng-click="currentAction='delete'" ng-disabled="formUser.$invalid || dataLoading" class="btn btn-danger">Delete</button> 
    </div>
</form>

修改后的JS代码 #

'use strict';
angular.module('admin')
.controller('AdminController', ['$scope', '$rootScope', '$location', 'AdminService', function ($scope, $rootScope, $location, AdminService) {
    $scope.cruduser = function(action) {
        if(!action) return;
        
        switch(action) {
            case 'add':
                console.log('Add');
                // 执行添加逻辑
                break;
            case 'read':
                console.log('Read');
                // 执行查询逻辑
                break;
            case 'update':
                console.log('Update');
                // 执行更新逻辑
                break;
            case 'delete':
                console.log('Delete');
                // 执行删除逻辑
                break;
        }
    };

    $scope.redirect = function() {
        $rootScope.sessionValue = ' ';
        window.location = "/#/login";
    }
}]);

注：原HTML代码末尾有一个多余的</div>标签，我已经在修改后的代码中移除，避免DOM结构错误。

内容的提问来源于stack exchange，提问作者Cristian Coroian