如何在成功提交其他表格后提交第二份表格

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

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

$scope.$watch(serviceB.get

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

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

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

在接触控制器中：

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