angular.js - Bagaimana untuk mengawal penyembunyian dan paparan elemen dengan menetapkan nilai pengikatan ng-show dalam panggilan balik ajax dalam AngularJS

Question

Saya mempunyai butang dan ikon pemuatan pada halaman. Ikon pemuatan menggunakan ng-show untuk mengikat atribut pengawal untuk mengenal pasti sama ada untuk memaparkannya Apabila butang diklik, program menggunakan $http.post untuk meminta data dari latar belakang dan menetapkan atribut yang ditetapkan oleh ng-show kepada benar. Kemudian tetapkan atribut ng-show kepada false dalam panggilan balik untuk menyembunyikan ikon pemuatan. Masalah saya ialah nilai harta yang ditetapkan dalam panggilan balik tidak menyembunyikan ikon pemuatan. Apabila saya mula menggunakan angularjs, terdapat banyak masalah yang tidak begitu jelas kepada saya. Bolehkah sesiapa membantu saya menyelesaikan keseluruhan masalah?
Coretan kod adalah seperti berikut:

    <!-- 页面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

Datang dan lakukan dengan saya

$.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 mempunyai $http

nya sendiri

$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);
});

Jika anda menggunakan $ajax jquery, anda perlu memberi perhatian kepada fungsi $scope.$apply Penggunaan standard adalah seperti berikut:

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