Controller.js

Question

我只是使用角度js和php编写联系表单。

它的工作，但我需要你的帮助一个功能。

你会在plunker上找到一个可运行的版本：https://plnkr.co/edit/4zeDV3sCVXIbVShGkVFe?p=preview

我用角度js实现了一个切换按钮。它仍然工作正常，但我想关闭它，当我从PHP脚本返回“success = true”，而不是当我点击它。因此，当消息发送成功时它会自动关闭。我尝试使用ng-click和一个函数，但我不知道如何用另一个值触发angular函数。

Controller.js

app.controller('ToggleCtrl', function ($scope) {
  $scope.sichtbar = false;
  $scope.toggle = function() {
    $scope.sichtbar = !$scope.sichtbar;
  };
}); app.controller('ContactController', function ($scope, $http) {
$scope.result = 'hidden'
$scope.resultMessage;
$scope.resultMessage1;
$scope.formData; //formData is an object holding the name, email, subject, and message
$scope.submitButtonDisabled = false;
$scope.submitted = false; //used so that form errors are shown only after the form has been submitted
$scope.submit = function(contactform) {
    $scope.submitted = true;
    $scope.submitButtonDisabled = true;
    if (contactform.$valid) {
        $http({
            method  : 'POST',
            url     : 'contact-form.php',
            data    : $.param($scope.formData),  //param method from jQuery
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
        }).success(function(data){
            console.log(data);
            if (data.success) { //success comes from the return json object
                $scope.submitButtonDisabled = true;
                $scope.resultMessage = data.message;

                $scope.result='bg-success';
            } else {
                $scope.submitButtonDisabled = false;
                $scope.resultMessage = data.message;
                $scope.resultMessage1 = data.message;
                $scope.errorName = data.errors.name;
                $scope.result='bg-danger';
            }
        });
    } else {
        $scope.submitButtonDisabled = false;
        $scope.resultMessage = 'Bitte alles ausfuellen (rot makiert)';
        $scope.result='bg-danger';
    }
}`

的index.html

<div ng-controller="ToggleCtrl">
    <button class="btn btn-primary btn-sm" ng-click="toggle()">Want to contact us directly????</button>
    <div ng-show="sichtbar"><div class="container" ng-controller="ContactController">
    <div class="col-md-6 col-md-offset-3">
        <form ng-submit="submit(contactform)" name="contactform" method="post" action="" role="form">
            <div class="form-group" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
                <label for="inputName" >Name</label>
                    <input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="Your Name" required>
            </div><div class="form-group" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
                <label for="inputEmail" >Email</label>
                <input ng-model="formData.inputEmail" autocomplete="on" type="email" class="form-control" id="inputEmail" autofocus name="inputEmail" placeholder="Your Email" required>
            </div>
            <div class="form-group" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }">
                <label for="inputSubject" >Subject</label>
                    <input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required>
            </div>
            <div class="form-group" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
                <label for="inputMessage" >Message</label>
                    <textarea ng-model="formData.inputMessage" class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea>
            </div>
            <button type="submit" class="btn btn-success btn-lg btn-block" ng-disabled="submitButtonDisabled">
                Send Message?
            </button>
        </form>

接触form.php的

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once 'phpmailer/PHPMailerAutoload.php';

    //check if any of the inputs are empty
    if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty($_POST['inputSubject']) || empty($_POST['inputMessage'])) {
        $data = array('success' => false, 'message' => 'Bitte alles ausfuellen');
        echo json_encode($data);
        exit;
    }

    //create an instance of PHPMailer
    $mail = new PHPMailer();


    $mail->IsSMTP(); // enable SMTP
    $mail->SMTPAuth = true; // au<a href="contact-form.php">No Title</a>thentication enabled
    $mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for GMail
    $mail->Host = "smtp.gmail.com";
    $mail->Port = 465; // or 587
    $mail->IsHTML(true);


    $mail->From = $_POST['inputEmail'];
    //$mail->FromName = $_POST['inputName'];
    $$mail->Subject = $_POST['inputSubject'];
    $mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\nMessage: " . stripslashes($_POST['inputMessage']);

    if (isset($_POST['ref'])) {
        $mail->Body .= "\r\n\r\nRef: " . $_POST['ref'];
    }

    if(!$mail->send()) {
        $data = array('success' => false, 'message' => 'Fehler: Mailer Error: ' . $mail->ErrorInfo);
        echo json_encode($data);
        exit;
    }
    $data = array('success' => true, 'message' => 'Thanks ');
    echo json_encode($data);

有什么想法吗？非常感谢你。

Answer 1

一些事情：

您的HTML无效，缺少两个结束</div>标记。
您需要处理http错误（例如，在plunkr中请求无法通过，因此您需要“错误”回调）。
要成功关闭表单，只需将$scope.toggle();放入成功回调中即可。你可以这样做，因为ContactController inherits from是ToggleController，所以两个控制器都可以使用切换功能。

Answer 2

感谢您的帮助，我修复了它：我添加了下面的代码来自动触发按钮。

$timeout(function() {
    var el = document.getElementById('btn123');
    angular.element(el).triggerHandler('click');
}, 0);

角度js与php - ng-click触发器没有物理点击

Controller.js

的index.html

接触form.php的

2 个答案: