Javascript 提交AngularJS表单时显示元素

正如标题所示，我正在尝试通过Angular提交表单，我希望有一个小的loading div，在执行提交操作时显示。这是我目前的情况

视图：

我尝试通过ng单击submit按钮来更改提交bool，我尝试了jQuery，我基本上尝试了$（）.hide（）的一些角度包装，在执行提交操作时，没有一个显示加载的gif

我应该注意到，提交操作（注释掉的内容）都像我预期的那样工作，我在提交操作中所做的只是一个带有$http的ajax调用，并显示一条成功消息

---

我发现有几页显示了一些看起来相当复杂的解决方案，所以我想先来这里，因为在表单提交中加载gif应该是一件相对简单的事情

在您的$scope.submit中，您可以

$scope.submit = function () {
    $scope.submitting = true;
    var postData = {name:"fred"};
    $http.post("/your/url", postData).then(function(response) {
        // Carry out the success actions
        $scope.submitting = false;
    }).catch(function(error) {
        // Carry out the failure actions
        $scope.submitting = false;
    });  
};

---

这是因为$http服务返回一个承诺。Promise有一个THEN方法，在$http请求完成时执行。catch块在非200 HTTP响应或失败（例如超时）时执行。

在$scope.submit中执行

$scope.submit = function () {
    $scope.submitting = true;
    var postData = {name:"fred"};
    $http.post("/your/url", postData).then(function(response) {
        // Carry out the success actions
        $scope.submitting = false;
    }).catch(function(error) {
        // Carry out the failure actions
        $scope.submitting = false;
    });  
};

---

这是因为$http服务返回一个承诺。Promise有一个THEN方法，在$http请求完成时执行。catch块在非200 HTTP响应或出现故障（例如超时）时执行。

伪代码的布局方式使它看起来像是在执行以下操作：

版本错误

var setupApp = angular.module("SomeApp", []);
setupApp.controller("SomeController", function ($scope, $http) {
    $scope.submit = function () {
        $scope.submitting = true;

        // Carry out the submit actions
        $http({
           method: 'POST',
           url: '/someUrl'
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
        }, function errorCallback(response) {
           // called asynchronously if an error occurs
           // or server returns response with an error status.
        });

        $scope.submitting = false;
    };
});

如果是这种情况，则使加载图像可见，启动

$http

请求，然后立即再次关闭提交标志。您希望将

$scope.submitting=false在回调函数中，而不是在异步进程之外，如下所示：

右侧版本：

        $scope.submitting = true;

        // Carry out the submit actions
        $http({
           method: 'POST',
           url: '/someUrl'
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.submitting = false;
            // do stuff

        }, function errorCallback(response) {
           // called asynchronously if an error occurs
           // or server returns response with an error status.
           $scope.submitting = false;
           // do stuff

        });

您布置伪代码的方式使其看起来像是在执行以下操作：

版本错误

var setupApp = angular.module("SomeApp", []);
setupApp.controller("SomeController", function ($scope, $http) {
    $scope.submit = function () {
        $scope.submitting = true;

        // Carry out the submit actions
        $http({
           method: 'POST',
           url: '/someUrl'
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
        }, function errorCallback(response) {
           // called asynchronously if an error occurs
           // or server returns response with an error status.
        });

        $scope.submitting = false;
    };
});

如果是这种情况，则使加载图像可见，启动
$http
请求，然后立即再次关闭提交标志。您希望将
$scope.submitting=false在回调函数中，而不是在异步进程之外，如下所示：

右侧版本：

        $scope.submitting = true;

        // Carry out the submit actions
        $http({
           method: 'POST',
           url: '/someUrl'
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.submitting = false;
            // do stuff

        }, function errorCallback(response) {
           // called asynchronously if an error occurs
           // or server returns response with an error status.
           $scope.submitting = false;
           // do stuff

        });

您是在$http响应处理中设置
$scope.submitting=false
，还是在该处理之外？如果在外部，那么看起来可能是您将其设置为可见，然后立即使其再次不可见。您的基本概念在我看来很合理。您是在$http响应处理中设置
$scope.submitting=false
，还是在该处理之外？如果在外部，那么看起来可能是您将其设置为可见，然后立即使其再次不可见。在我看来，您的基本概念是合理的；在您所称的successCallback（承诺解析）和errorCallback方法中。您可以使用anon函数。目前，scope.submiting=false将立即执行，这不是提问者想要的。更好的代码：）虽然帖子更适合提交人，但我展示了我认为他在代码中所做的事情，然后说他应该将其更改为什么，但我没有展示，这有点让人困惑。为清晰起见，添加了明确的更正版本。@danday74足够公平-已更新。虽然我认为如果OP编辑问题以包含实际提交操作，我们会更好，因为我认为这就是问题所在，但目前这仍然只是猜测。：）在我的电话里，我正在开会，但我认为你们都是对的，我会用我正在做的事情更新我的帖子，当我回到电脑前，我会选择并回答。我知道事情会是这样的，我花了很多时间为这件事发愁，哈哈。谢谢你，你会把$scope.submitting=false；在您所称的successCallback（承诺解析）和errorCallback方法中。您可以使用anon函数。目前，scope.submiting=false将立即执行，这不是提问者想要的。更好的代码：）虽然帖子更适合提交人，但我展示了我认为他在代码中所做的事情，然后说他应该将其更改为什么，但我没有展示，这有点让人困惑。为清晰起见，添加了明确的更正版本。@danday74足够公平-已更新。虽然我认为如果OP编辑问题以包含实际提交操作，我们会更好，因为我认为这就是问题所在，但目前这仍然只是猜测。：）在我的电话里，我正在开会，但我认为你们都是对的，我会用我正在做的事情更新我的帖子，当我回到电脑前，我会选择并回答。我知道事情会是这样的，我花了很多时间为这件事发愁，哈哈。谢谢，我建议他们使用
.finally（function（）{$scope.submiting=false；}）
以避免代码重复，因为
finally
在成功和失败的情况下都会执行。我建议他们使用
.finally（function（）{$scope.submiting=false；}）
以避免代码重复，因为成功和失败场景最终都会执行
。