angular.js - 如何在 AngularJS 在ajax回调里通过设置ng-show绑定的值来控制元素的隐藏和显示

Question

我在页面上有一个按钮和一个loading图标。loading图标使用ng-show绑定一个控制器属性来标识是否显示，当点击按钮时程序使用$http.post去后台请求数据并设置ng-show设置的属性为true。然后在回调中设置ng-show的属性为false来隐藏loading图标。我的问题是在回调中设置的属性值不能隐藏loading图标。刚开始用angularjs有很多问题还不是很清楚，谁能帮帮我解决整个问题。
代码片段如下：

    <!-- 页面html片段-->
    <p class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-primary" ng-disabled="groupForm.$invalid" ng-click="saveGroup()">
              保存<i class="fa fa-refresh fa-spin fa-lg fa-fw" ng-show="showLoading"></i>
        </button>
    </p>

//js controller代码

var teamModule = angular.module("TeamModule", []);

teamModule.controller('GroupCtrl', function($scope, $http, $state, $stateParams) {
    
    $scope.showLoading = false;
    $scope.groupInfo = {};
    
    $scope.toggleLoading = function(isShow){
        $scope.showLoading = isShow;
    };
    
    $scope.saveGroup = function(){
        $scope.toggleLoading(true);
        
        //请求使用jquery进行发送
        $.ajax({
            url: 'group/save',
            data: $scope.groupInfo,
            dataType: 'json',
            type: "post", 
            success: function(data){
                console.log(data);
                $scope.toggleLoading(false);
            },
            error: function(){
                $scope.toggleLoading(false);
            }
        });
        
    };

});

Answer 1

Come and do it with me

$.ajax({
    url: 'group/save',
    data: $scope.groupInfo,
    dataType: 'json',
    type: "post",
    success: function(data){
        console.log(data);
        $scope.toggleLoading(false);
        $scope.$apply();
    }, error: function(){
        $scope.toggleLoading(false);
        $scope.$apply();
    }
});

Answer 2

angularjs has its own $http

$http({
    url:'/api/login.do',//请求地址
    data:{username:'test',password:'test'},//post数据
    params:{version:1}//get参数
}).success(function(data){
    console.log(data);
}).error(function(e){
    console.error(e);
});

If you use jquery’s $ajax, you need to pay attention to the $scope.$apply function. The standard usage is as follows:

$scope.$apply(function(){
    $scope.loading = false;
});