javascript - 从 Angular Promise 访问 Form 元素和 div

Question

我正在学习 Angular 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() block 内。但我需要知道如何访问成功元素并清除表单字段。

谢谢。

Answer 1

使用 $scope(并将其添加到依赖项中)，而不是 this。正确知道您的 successs 属性已分配给不同的对象(窗口和回调函数)。

Controller 代码:

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>