Onsen UI сломал мой скрипт PayPal (и весь другой javascript)

Question

Я медленно интегрировал пользовательский интерфейс Onsen с существующим веб-приложением.

В файле домашней страницы (index.jade) содержится сплиттер, который позволяет осуществлять навигацию по всему приложению. Разделитель загружает маршрут NodeJS, который отображает запрашиваемую страницу в нефритах. Все до этого момента работает так, как предполагалось (на самом деле только весь мой код jade-кода переднего края отображается правильно). Каждая страница сплиттера хранится в отдельном нефритовом файле (за исключением домашней страницы).

Проблема:

Конфигурируя мое приложение таким образом, я узнал, путем проб и ошибок, что все мое JavaScripts во всех моих нефритовых файлах больше не визуализируется с кодом нефрита (я не знаю правильной терминологии). Я могу заставить мои javascripts работать, если я либо вырезаю и вставляю их в index.jade, либо создаю отдельные файлы javascript и включаю их в index.jade.

Это проблема сама по себе (хотя я могу обойти ее, выполняя вышеуказанное), но это является причиной моей основной проблемы: она разбивает мой сценарий PayPal на одной из моих страниц.

Прежде чем интегрировать пользовательский интерфейс Onsen, я успешно использовал check-in-check-код PayPal в своем приложении.

Примеры кода:

Это, как я был реализации PayPal в одном из моих взглядов, прежде чем я начал интегрировать Onsen 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()') 

Последних ДИВЫ вызывает функцию углового контроллера, openPayPal(), который вызывает функцию в яваскрипте файла, который включен в 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 даже не появляется. Я считаю, что это потому, что я делаю что-то неправильно со сценариями.

Я из идей.

Кто-нибудь знает, как реализовать это, или знать, что я делаю неправильно?

Кроме того, кто-нибудь знает работу вокруг, чтобы включить javascript в свои нефритовые файлы?

Благодарим вас за ваше время.

UPDATE

Если я иду в 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) 

UPDATE 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 формы в нефритовом файле. Без использования под нагрузкой, и размещение этого DIV в форме PayPal,

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

Я получаю сообщение об ошибке:

Cannot read property 'appendChild' of null at openPayPalPlease

Использование под нагрузкой, ничего не происходит, и сценарий не получает загружен.

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> 

Таким образом, вы можете попробовать использовать один из этих способов. А также вы можете попробовать сделать console.log s в функциях openPayPal и paypalCheckoutReady, готовых убедиться, что все выполнено отлично. Также вы должны проверить, не возникли ли ошибки в консоли. (Правая кнопка мыши → инспектировать элемент → консоли)

Update:

Я проверил реализацию 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, и если это так, я просто вызываю свою функцию инициализации самостоятельно и устанавливаю логическое значение, чтобы это не повторилось.