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 之前在我的一个观点中实施 PayPal 的方式 UI:

//- 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 控制器中的一个函数 openPayPal()，它调用 javascript 文件中的一个函数，该文件被包含在 index.jade 中:

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

我无法从我的控制器动态加载脚本。这是 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')

这是我在控制器中的 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

使用加载时，没有任何反应，也没有加载脚本。

Answer 1

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

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

方式 1（旧的但常见的方式）

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

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

方式二（新，推荐）

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

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

所以您可以尝试使用其中一种方法。你也可以尝试在 openPayPal 和 paypalCheckoutReady 函数中做一些 console.logs 准备好确保一切正常执行。您还应该检查控制台中是否出现任何错误。（右键单击 → 检查元素 → 控制台）

更新:

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

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

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

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

window.paypal && window.paypalCheckoutReady();

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

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

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

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

Answer 2

PayPal 有一个问题，如果 document.readyState == 'interactive' 那么您的函数将不会被调用。您可以通过在调试控制台中键入 document.readyState 来验证这一点。

如果您的资源仍在加载中，可能会出现这种情况 - 但是我也认为 Chrome 的当前版本中有一个错误，我正在尝试重现该错误以进行报告。

检查 Chrome 调试工具的 'Network' 选项卡以查找任何长运行请求。

我也向 PayPal 报告了这个问题，但他们通常没有希望，所以我不希望他们解决它。

我最终设置了 5 秒的超时，然后检查 window.paypal 是否已初始化，如果是，我自己调用我的初始化函数并设置一个布尔值以防止它再次发生。

Onsen UI 破坏了我的 PayPal 脚本（以及所有其他 javascript）

Onsen UI broke my PayPal script (and all other javascript)

javascript

paypal

node.js

express

onsen-ui