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被搞砸了

var obj={1:{2:3}};

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

在信用控制器中，收到来自请求后的回复

var innrObj=obj[1];

var value = innrObj[2];

// 3

在联系人控制器中：

$scope.$watch(serviceB.get

Answer 2

看到最小化的代码真的很有趣。

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

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

你为什么不删除这一行？

var stripeDone = serviceB.get();

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

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

2 个答案: