javascript - 从Angular Promise访问表单元素和div

我正在学习角度js。我只想清除表单字段并在http then（）中显示成功的div。

this.formSubmitted = false;
this.successs = false;

myResumeApp.controller("FormController",['$http', function($http){
    this.formSubmit = function(contactForm) {
    this.formSubmitted = true;
    if(contactForm.$valid)
    {
        $http({
              method: 'post',
              url: 'http://jerrythimothy.is-great.net/mailme.php',
              data: $.param({
                    fname : this.fname,
                    email : this.email,
                    content : this.content
                }),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).then(function successCallback(response) {
                this.successs = true;
                // 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.
              });// JavaScript Document
        }
    };
}]);



<div class="container" ng-controller="FormController as formCtrl">
  <h2>Contact me</h2>
  <div ng-show="formCtrl.successs" class="alert alert-success fade in"          style="padding-top:5px;padding-bottom:5px;margin-top:5px;margin-bottom:5px;">Thank you for contacting me. I will be in touch with you shortly.</div>
   <form role="form" name="contactForm" novalidate ng-submit="formCtrl.formSubmit(contactForm)">

请让我知道我的代码或任何其他建议是否有问题。该控件位于then（）块内部。但是我需要知道如何访问成功元素并清除表单字段。

谢谢。

最佳答案

代替this，使用$scope（并将其添加到依赖项中）。知道您的successs属性已分配给不同的对象（窗口和回调函数）。

控制器代码：

myResumeApp.controller("FormController",[
    '$scope',
    '$http',
    function($scope, $http){
        $scope.successs = false;
        $scope.formSubmitted = false;
        $scope.msg = {};
        $scope.formSubmit = function(contactForm) {
            $scope.formSubmitted = true;

            if(contactForm.$valid)
            {
                $http({
                  method: 'post',
                  url: 'http://jerrythimothy.is-great.net/mailme.php',
                  data: $.param({
                        fname : $scope.msg.fname,
                        email : $scope.msg.email,
                        content : $scope.msg.content
                    }),
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function successCallback(response) {
                    $scope.successs = true;
                    $scope.msg = {};
                    // 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.
                  });// JavaScript Document
            }
        };
    }
]);

HTML代码：

<div class="container" ng-controller="FormController as formCtrl">
<h2>Contact me</h2>

<div ng-show="successs"
class="alert alert-success fade in"
style="padding-top:5px;padding-bottom:5px;margin-top:5px;margin-bottom:5px;">
    Thank you for contacting me. I will be in touch with you shortly.
</div>
<form role="form" name="contactForm" novalidate ng-submit="formSubmit(contactForm)">
    <input type="text" name="name" ng-model="msg.fname" />
    <input type="text" name="email" ng-model="msg.email" />
    <input type="text" name="content" ng-model="msg.content" />
    <input type="submit" value="submit" />
</form>

关于javascript - 从Angular Promise访问表单元素和div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35049129/