javascript - Onsen UI 破坏了我的 PayPal 脚本(以及所有其他 javascript)

Question

我一直在慢慢地将 Onsen UI 与我现有的网络应用程序集成。

我的主页文件 (index.jade) 包含一个拆分器，可以在整个应用程序中导航。拆分器加载一个 NodeJS 路由，该路由在 jade 中呈现请求的页面。到目前为止，一切都按预期工作(实际上只是我所有的前端 jade 代码都被正确渲染了)。拆分器的每个页面都存储在一个单独的 jade 文件中(首页除外)。

问题:

通过以这种方式配置我的应用程序，我通过反复试验了解到我所有 jade 文件中的所有 javascript 不再使用 jade 代码呈现(我不知道正确的术语)。如果我将 javascript 剪切并粘贴到 index.jade，或者创建单独的 javascript 文件并将它们包含在 index.jade 中，我只能让我的 javascript 工作。

这本身就是一个问题(虽然我可以通过执行上述操作来解决它)，但它是我的主要问题的原因:它破坏了我的一个页面上的 PayPal 脚本。

在集成 Onsen UI 之前，我在我的应用程序中成功使用了 PayPal incontext 结账。

代码示例:

这就是我在开始集成 Onsen UI 之前在我的一个 View 中实现 PayPal 的方式:

//- the following is for In-Context PayPal checkout ********************
  div(ng-show="viewEvent && viewEvent.spacesAvailable > 0")
    br
    label(ng-show='eventStatus === 1') This event is being hosted by you! You can not RSVP.  
    label(ng-show='eventStatus === 2') You have RSVP'd for this event, but have not payed.
    label(ng-show='eventStatus === 3') You have already payed for this event.
    label(ng-show='eventStatus === 4') RSVP
    form#myContainer(ng-show='eventStatus === 2 || eventStatus === 4' action="{{'https://10.0.0.25:8001/checkout/' + user._id + '/' + viewEvent._id + '/' + viewEvent.eventName + '/' + viewEvent.price}}" ng-click='rsvp(user._id, viewEvent._id);' method='get')
    script.
      window.paypalCheckoutReady = function () {
        paypal.checkout.setup("**redacted**", {
          environment: "sandbox",
          container: "myContainer"
        });
      };
    script(src='//www.paypalobjects.com/api/checkout.js', async)

我只是把脚本放在那里，一切都正确加载，我能够使用 PayPal 的上下文结账进行购买。但是，现在我不能那样插入脚本。我已将我的代码更改为:

//- the following is for In-Context PayPal checkout ********************
  div(ng-if="viewEvent && viewEvent.spacesAvailable > 0")
    br
    label(ng-show='eventStatus === 1') This event is being hosted by you! You can not RSVP.  
    label(ng-show='eventStatus === 2') You have RSVP'd for this event, but have not payed.
    label(ng-show='eventStatus === 3') You have already payed for this event.
    label(ng-show='eventStatus === 4') RSVP
    form#myContainer(ng-show='eventStatus === 2 || eventStatus === 4' action="{{'https://10.0.0.25:8001/checkout/' + user._id + '/' + viewEvent._id + '/' + viewEvent.eventName + '/' + viewEvent.price}}" ng-click='rsvp(user._id, viewEvent._id);' method='get')
    div(ng-init='openPayPal()')

最后一个 div 调用 Angular Controller 中的函数 openPayPal()，它调用 index.jade 中包含的 javascript 文件中的函数:

function openPayPal() {
  window.paypalCheckoutReady = function () {
    paypal.checkout.setup("**redacted**", {
      environment: "sandbox",
      container: "myContainer"
    });
  };
}

此外，PayPal 脚本:

script(src='//www.paypalobjects.com/api/checkout.js', async)

现在包含在 index.jade 中。

所以在完成所有这些之后，PayPal 按钮甚至没有出现。我相信这是因为我对脚本做错了什么。

我没有想法。

有谁知道如何实现这个，或者知道我做错了什么？

此外，有人知道在我的 jade 文件中包含 javascript 的解决方法吗？

谢谢大家的宝贵时间。

更新

如果我转到 index.jade，删除正文下方的所有内容(包括加载 PayPal 按钮不起作用的页面的拆分器)，然后粘贴以下代码，然后 PayPal 按钮就会像预期的那样显示(就像我开始集成 Onsen UI 之前一样)。

form#myContainer(action='*deleted for now*' method='get')
script.
  window.paypalCheckoutReady = function () {
    paypal.checkout.setup("*redacted*", {
      environment: "sandbox",
      container: "myContainer"
    });
  };
script(src='//www.paypalobjects.com/api/checkout.js' async)

解决方案更新 2

我无法从我的 Controller 动态加载脚本。这是 search.jade 中的内容:

  //- the following is for In-Context PayPal checkout ********************
  div(ng-show="viewEvent && viewEvent.spacesAvailable > 0")
    br
    label(ng-show='eventStatus === 1') This event is being hosted by you! You can not RSVP.  
    label(ng-show='eventStatus === 2') You have RSVP'd for this event, but have not payed.
    label(ng-show='eventStatus === 3') You have already payed for this event.
    label(ng-show='eventStatus === 4') RSVP
    form#myContainer(on-load='controller.openPayPalPlease()' ng-show='eventStatus === 2 || eventStatus === 4' action="{{'https://10.0.0.25:8001/checkout/' + user._id + '/' + viewEvent._id + '/' + viewEvent.eventName + '/' + viewEvent.price}}" ng-click='rsvp(user._id, viewEvent._id);' method='get')

这是我在 Controller 中的 Angular 函数:

this.openPayPalPlease = function() {
    window.paypalCheckoutReady = function () {
      paypal.checkout.setup("H6LX5CJXEQYEL", {
        environment: "sandbox",
        container: "myContainer"
      });
    };

    var s = document.createElement('script');
    s.setAttribute('src', '//www.paypalobjects.com/api/checkout.js');
    document.getElementById('myContainer').appendChild(s);
  };

请注意我是如何在 jade 文件的 PayPal 表单中使用 on-load 调用 Angular 函数的。不使用 on-load，并将此 div 放在 PayPal 表单下，

div(ng-init='controller.openPayPalPlease()')

我收到错误:

Cannot read property 'appendChild' of null at openPayPalPlease

使用on-load，没有任何反应，脚本也不会被加载。

Answer 1

我猜想，由于某些情况，您没有正确调用您的函数，或者您试图在它准备好之前调用它。

旁注:虽然这可能不是问题所在 - 现在您正在调用一个全局函数 - 在 Angular 中有 2 种常见的事件处理方法。

方式 1(古老但常见的方式)

module.controller('MyController', function($scope) {
    $scope.myHandler = function() { ... };
});

<div ng-controller="MyController">
    <div ng-event-name="myHandler()"></div>
</div>

方式2(新，推荐)

module.controller('MyController', function() {
    this.myHandler = function() { ... };
});

<div ng-controller="MyController as MC">
    <div ng-event-name="MC.myHandler()"></div>
</div>

因此您可以尝试使用其中一种方法。您还可以尝试在 openPayPal 和 paypalCheckoutReady 函数中执行一些 console.log 以确保一切正常执行。您还应该检查控制台中是否出现任何错误。 (右键单击→检查元素→控制台)

更新:

我检查了 paypalobjects.com/api/checkout.js 的实现我想我发现了正在发生的事情。

直到此时，我一直期待您仍在调用您的 paypalCheckoutReady 函数，但似乎结账脚本实际上会检查它是否存在并执行它，否则它会执行默认函数。由于您是函数的定义者，您实际上应该能够在其中添加一个 console.log 并看到它没有被执行。

既然您说您将 paypal 脚本移动到 index.jade，这意味着它在您的实际代码执行之前很久就已执行。值得庆幸的是，如果您没有具有 data-paypal-(button|id|sandbox) 属性的元素，则调用的默认函数不会执行任何操作，因此您是安全的。

唯一剩下的就是调用您的函数。我检查了脚本的实现，所以它对你的函数所做的唯一事情就是在页面加载后调用它。所以在你的情况下你可以自己调用它。您可以在像这样定义 paypalCheckoutReady 函数后添加此行:

window.paypal && window.paypalCheckoutReady();

或者，您可以从您的 Controller 动态加载 paypal 脚本。从概念层面来看，这可能是一个优雅的解决方案，因为它使您可以更好地控制总体程序流。所以像

var s = document.createElement('script');
s.setAttribute('src', '//www.paypalobjects.com/api/checkout.js');
parent.appendChild(s);

其中 parent 是 document.body、document.head、您的页面或您喜欢的任何内容。您还可以进行一些检查以防止再次加载脚本。

我认为这两种解决方案都应该有效，因此您可以使用您喜欢的一种。