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

Question

我一直在慢慢地将Onsen与我现有的web应用程序集成在一起。

我的主页文件(index.jade)包含一个拆分器，它支持整个应用程序的导航。拆分器加载一个NodeJS路径，该路径以翡翠形式呈现请求的页面。到目前为止，一切都按预期工作(实际上，我的前端玉代码都被正确地呈现了)。拆分器的每一页都存储在单独的玉文件中(主页除外)。

问题：

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

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

在Onsen集成之前，我在我的应用程序中成功地使用了PayPal内的上下文签出。

代码示例：

在开始集成Onsen之前，我就是这样在我的一个视图中实现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)

我只是把脚本放在那里，所有加载正确，我能够作出购买与贝宝的上下文检查。但是，现在我不能这样插入脚本。我已经把我的代码改为：

//- 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调用角控制器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按钮甚至都不会出现。我相信这是因为我在脚本上做错了什么。

我没有主意了。

有人知道如何实现这一点，或者知道我做错了什么吗？

另外，有没有人知道在我的玉文件中包含javascript的工作？

谢谢大家抽出时间。

更新

如果我转到index.jade，删除正文下面的所有内容(包括加载PayPal按钮不能工作的页面的拆分器)，并粘贴下面的代码，那么PayPal按钮就会像它应该显示的那样显示出来(就像我开始集成Onsen之前一样)。

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')

这是控制器中的角函数：

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);
  };

请注意，我是如何调用玉文件中PayPal表单中的on的角函数的。而不使用on，并将该div放在PayPal窗体下，

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

我收到错误：

无法读取属性'appendChild‘of null at openPayPalPlease

使用on，什么都不会发生，脚本也不会被加载.

Answer 1

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

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

Way 1 (旧的，但常见的方式)

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

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

Way 2 (新的，推荐)

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

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

所以你可以试着用这些方法之一。此外，您还可以尝试在openPayPal和paypalCheckoutReady函数中执行一些openPayPal和paypalCheckoutReady，以确保一切都执行得很好。此外，您还应该检查控制台中是否有任何错误。(右键单击→检查元素→控制台)

更新

我检查了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调试工具的“网络”选项卡，以查找任何长时间运行的请求。

我也向PayPal报告过这个问题，但他们一般都是无望的，所以我不希望他们解决这个问题。

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