如何在其他表单成功提交后才提交第二个表单

Question

我将 Angular 与 UI 路由器和 Firebase 一起使用。单个页面上有两种不同状态的两种表格：联系表格和信用卡表格。

当用户点击提交时，信用卡信息被提交给 Stripe。然后将联系表单提交给 Firebase，但前提是信用卡交易成功完成。以下代码在开发中有效。但是当代码被缩小时，联系表单永远不会提交。

对我做错了什么有什么想法吗？

联系表格的控制器：

.controller('ContactFormCtrl', ['$scope', 'Contacts', 'serviceB',  function ($scope, Contacts, serviceB) {
  var contactForm = this;
  var stripeDone = serviceB.get();
  contactForm.contact = {};
  contactForm.contacts = Contacts;

  $scope.$watch(serviceB.get, function(stripeDone) {
    if (stripeDone === 'yes') {
      console.log(contactForm.contact);
      Contacts.$add(contactForm.contact)
 } else {
      console.log('Card not charged');
       }
 }])

信用卡表单控制器：

.controller('PaymentFormCtrl', ['$scope', '$http', 'serviceB', function ($scope, $http, serviceB) {

    $scope.handleStripe = function (status, response) {

    var stripeDone='yes';

        return $http.post(http://localhost:9000/api/payments, JSON.stringify(response))
       .then(function() {
         serviceB.set(stripeDone);console.log('serviceB set now',stripeDone);})
       .then(function() {$scope.payment={};
       })
       .then(function() {$state.go('thankyou');})
}]);

ServiceB 服务：

(function() {

  'use strict';
   angular.module('App')

  // ServiceB confirms that credit card info was submitted to Stripe
    .service('serviceB', serviceB);

    function serviceB () {

        var status = null;
        return {
           get: function () {
              return status;
      },
           set: function (value) {
              status = value;
    }
   };
   }
  })();

联系工厂：

(function() {
  'use strict';

  angular.module('contacts.fact', [])

  .factory('Contacts', ['$firebaseArray', '$q', 'FBURL', 'Auth', 'Ref', function ($firebaseArray, $q, FBURL, Auth, Ref) {

      var authData = Ref.getAuth();
      var ref = new Firebase(FBURL + '/contacts/' + authData.uid);
      return $firebaseArray(ref);
    }]);
})();

路由器信息：

.state('payment.details', {
      url: '/details',
      views: {

         'top': {
            templateUrl: 'app/views/contact-form.html',
            controller: 'ContactFormCtrl as contactForm'

       },
         'bottom': {

            templateUrl: 'app/views/credit-card.html',
            controller: 'PaymentFormCtrl'
    // Note: not using controllerAs syntax because Angular Payments module does not support it
    },
     }
 })

更新：如果我将.then(function() {$state.go('thankyou');}) 从信用卡表单的控制器中移出，并将其放在联系人表单控制器中Contacts.$add(contactForm.contact) 的末尾，那么一切正常。这解决了问题，但我怀疑这是正确的解决方案。有什么想法吗？

Answer 1

看到您的最小化代码实际上会很有趣。

不缩小时，函数的stripeDone参数隐藏，局部变量stripeDone。因此，您正在评估 if 条件中 serviceB.get() 的值。

可能发生的情况是，在缩小时，缩小器没有得到参数 stripeDone 隐藏局部变量，并将 if 中的局部变量 stripeDone 和 stripeDone 缩小到相同的标识符和函数的参数 stripeDone到另一个参数。所以在最小化的情况下，你真正要做的是评估值不变的局部变量（null）而不是新值（yes）。

你为什么不直接删除这一行？

var stripeDone = serviceB.get();

只是一个假设......

Answer 2

我的怀疑是被监视的表达式： serviceB.get 在代码缩小时搞砸了

$scope.$watch(serviceB.get

而且，从服务中寻找变化的想法对我来说似乎很尴尬。为什么不让信用控制器在完成处理并且联系控制器可以监听该事件后广播事件？

在信用控制器中，收到来自发布请求的响应后

function {
   serviceB.set(stripeDone);
   $rootScope.$broadcast("stripeDone");
   console.log('serviceB set now',stripeDone);
}

在联系人控制器中：

$scope.$on("stripDone", function() {
    //process
});