将 Angular $scope 对象传递给 PHP 到 Hubspot 表单答案

【问题标题】：Pass Angular $scope object to PHP to Hubspot Form将 Angular $scope 对象传递给 PHP 到 Hubspot 表单
【发布时间】：2016-11-03 17:55:12
【问题描述】：

我正在尝试通过调用 AJAX 函数将 Angular $scope 值传递给 Hubspot 表单。

我正在控制器中进行计算，然后我希望将该数据输入到相应的 Hubspot 表单字段中。

在我的 Angular 控制器中，我有这个：

    $scope.submit = function(valid) {
    $scope.$watch(function() {
       return $scope.selectedValue
     }, function() {
        $scope.calculation = $scope.input1 * $scope.selectedValue;
     }
     }

我想将 $scope.calculation 值传递给 php 脚本，然后传递给 hubspot 表单。

我的代码如下所示：

  $.ajax({
              url: 'form.php',
              type: 'POST',
              dataType: "json",
              data: {
                  company: $('#company').val(),
                  firstname: $('#firstname').val(),
                  lastname: $('#lastname').val(),
                  jobtitle: $('#jobtitle').val(),
                  email: $('#email').val(),
                  calculation: $scope.calculation
              }

我只是在这部分使用 Hubspot PHP API，特别是收集输入数据。

$str_post = "company=" . $_POST["company"]
. "&firstname=" . $_POST["firstname"]
. "&lastname=" . $_POST["lastname"]
. "&jobtitle=" . $_POST["jobtitle"]
. "&email=" . $_POST["email"]
. "&calculation=" . $_POST["calculation"]
. "&hs_context=" . urlencode($hs_context_json); //Leave this one be

我尝试将相应的 $scope 设置为变量名，但仍然没有。

任何帮助将不胜感激。谢谢。

【问题讨论】：

天哪 - 使用 Angular 内置的 $http 模块 - 并使用实际的 $scope ngModel 值，not jquery .val() 方法 - 它可能导致问题的至少部分。
10 4，将相应更新

标签： php angularjs ajax angularjs-scope hubspot

【解决方案1】：

您以完全绕过 Angular 的方式提交此表单。

我强烈推荐阅读这篇文章的这一部分：https://scotch.io/tutorials/submitting-ajax-forms-the-angularjs-way#submit-the-form-with-angular

它可能会覆盖一些你已经知道的东西，但它会告诉你如何提交使用数据绑定来获取你输入的值，然后使用 Angular 的 $http 服务而不是 jQuery AJAX 来提交数据到你的 API。

希望这会有所帮助！

【讨论】：

【解决方案2】：

只是以其他答案中所说的内容为基础，您会发现使用 Angular 的 $http 服务更容易。 AJAX 调用需要在您的控制器内完成。

进行这样的表单提交的最佳方法是使用ng-model 指令将input 元素链接到$scope。然后，当提交表单时，您使用ng-submit 指令在控制器中调用submit 函数。听起来很复杂，但效果很赞。

HTML

<div ng-controller="YourController">
    <form ng-submit="submit(myForm.$valid)" name="myForm" novalidate>
        <input ng-model="responses.company" type="text">
        <!-- More fields go here, all linked to scope with ng-model -->
    </form>
</div>

app.controller('YourController', ['$scope', '$http', function($scope, $http){
    $scope.responses = {};         

    $scope.submit = function(valid){
        if(valid){

            var calculation = parseFloat($scope.responses.input1) * parseFloat($scope.responses.selectedValue);   

            $http({
                method: 'POST',
                url: 'form.php',
                data: {
                    company: $scope.responses.company,
                    firstname: $scope.responses.firstname,
                    lastname: $scope.responses.lastname,
                    jobtitle: $scope.responses.jobtitle,
                    email: $scope.responses.email,
                    calculation: calculation
                }
            }).then(function successCallback(response) {
                //Success!
            }, function errorCallback(response) {
                //Failure :(
            });
        }
    };
}]);

【讨论】：