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

來，跟我一起做

$.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有自帶的$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);
});

如果使用jquery的$ajax，需要注意的是$scope.$apply函數，標準用法如下：

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