angulaire.js - Comment contrôler le masquage et l'affichage des éléments en définissant la valeur de la liaison ng-show dans le rappel ajax dans AngularJS

Question

J'ai un bouton et une icône de chargement sur la page. L'icône de chargement utilise ng-show pour lier un attribut de contrôleur afin de déterminer s'il doit être affiché. Lorsque vous cliquez sur le bouton, le programme utilise $http.post pour demander des données à l'arrière-plan et définir l'attribut défini par ng-show sur true. Définissez ensuite l'attribut ng-show sur false dans le rappel pour masquer l'icône de chargement. Mon problème est que la valeur de propriété définie dans le rappel ne masque pas l'icône de chargement. Lorsque j'ai commencé à utiliser Angularjs, de nombreux problèmes n'étaient pas très clairs pour moi. Quelqu'un peut-il m'aider à résoudre l'ensemble du problème ?
L'extrait de code est le suivant :

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

Viens le faire avec moi

$.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 a son propre $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);
});

Si vous utilisez $ajax de jquery, vous devez faire attention à la fonction $scope.$apply. L'utilisation standard est la suivante :

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