Question

我正在尝试在我的控制器中使用StripeCheckout。在脚本加载StripeCheckout附加到window对象之后，我创建了一个提供者，它应该返回该对象：

angular.module('organization.settings').controller('OrganizationSettingsCtrl', [ '$scope', 'StripeCheckout', 'organization',
    function($scope, StripeCheckout, data) {
 ...
}]).provider('StripeCheckout', function ProvideStripeCheckout() {
  var provider = {};

  provider.$get = function( $window ) {
    return $window.StripeCheckout;
  };

  return provider;
});

上面的代码在没有缩小的情况下工作正常，但是一旦代码缩小，我就会遇到以下异常：

Error: [$injector:unpr] Unknown provider: aProvider <- a <- StripeCheckout <- StripeCheckout
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20StripeCheckout%20%3C-%20StripeCheckout
at https://localhost:3000/app.min.js:3:20639
at https://localhost:3000/app.min.js:4:6662
at Object.d [as get] (https://localhost:3000/app.min.js:4:5832)
at https://localhost:3000/app.min.js:4:6759
at d (https://localhost:3000/app.min.js:4:5832)
at Object.e [as invoke] (https://localhost:3000/app.min.js:4:6169)
at https://localhost:3000/app.min.js:4:6779
at d (https://localhost:3000/app.min.js:4:5832)
at e (https://localhost:3000/app.min.js:4:6169)
at Object.f [as instantiate] (https://localhost:3000/app.min.js:4:6294) <div ng-view="" class="container ng-scope">

Answer 1

根据Checkout Reference：

注意：必须从https://checkout.stripe.com/checkout.js加载结帐。不支持使用Checkout的本地副本，可能会导致用户可见的错误。

因此，当我将<script src="https://checkout.stripe.com/checkout.js"></script>放入我的索引页面时，它会在缩小后删除。

解决方案是从控制器动态地将脚本附加到页面主体：

angular.module('organization.settings').config(['$routeProvider', 'securityAuthorizationProvider', function($routeProvider, securityAuthorizationProvider){

var script = document.createElement('script');
script.src = 'https://checkout.stripe.com/checkout.js';
document.body.appendChild(script);
script.onload = function () {
  console.log("StripeCheckout loaded");
};

并创建一个工厂以便稍后检索StripeCheckout对象：

angular.module('organization.settings').controller('OrganizationSettingsCtrl', [ '$scope', 'Upload', 'utility', 'StripeCheckout', function($scope, Upload, utility, StripeCheckout) {

  var handler = StripeCheckout.configure({
  ...
  });
...
}]).factory('StripeCheckout', ['$window', function ($window) {
  return $window.StripeCheckout;
}]);

在AngularJS中加载StripeCheckout

1 个答案: