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

Question

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

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

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

联系表格的 Controller :

.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 :

.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');})
}]);

服务B服务:

(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');})来自信用卡表格的 Controller ，并将其放在Contacts.$add(contactForm.contact)的末尾在联系表格的 Controller 中，一切正常。这解决了问题，但我怀疑这是正确的解决方案。有什么想法吗？

Answer 1

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

$scope.$watch(serviceB.get

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

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

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

接触式 Controller :

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