Как я могу реализовать Plaid API, используя Ionic?

Мне удалось успешно реализовать API в Интернете, вот как это выглядит, у меня есть кнопка в обычном HTML-файле...

<div>
    <span class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>
</div>

Я включаю тег сценария...

<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>

и я включаю следующий JavaScript в тело HTML...

<script type="text/javascript">
  var sandboxHandler = Plaid.create({
      clientName: 'SUM',
      env: 'tartan',
      product: 'auth',
      key: 'test_key',
      onSuccess: function(token) {
        //window.location = '/accounts.html?public_token=' + token;
        console.log("yes");
      },
    });

  // Open the "Institution Select" view using the sandbox Link handler.
    document.getElementById('sandboxLinkButton').onclick = function() {
      sandboxHandler.open();
    };

</script>

Теперь я хочу сделать то же самое, используя угловой JS. Я использую ионную структуру (не то, чтобы это действительно имеет значение). Поэтому я сначала отображаю необходимый HTML, используя следующую...

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/app');
  $stateProvider

  .state('app', {
    url: '/app',
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
});

мой menu.html файл содержит следующую кнопку...

 <span ng-click="create()" class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>

на ng-click он достигает следующего контроллера. Я пытался реализовать API в этом контроллере, но безрезультатно...

app.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
    var sandboxHandler = Plaid.create({
    clientName: 'SUM',
    env: 'tartan',
    product: 'auth',
    key: 'test_key',
    onSuccess: function(token) {
        console.log("yes");
    },
  });

  $scope.create = function() {
    sandboxHandler.open();
  }
});

Я получаю ошибку Plaid не определяется в контроллере. Это почему?

РЕДАКТИРОВАТЬ

Я скопировал версию веб-приложения, используя angular, и это сработало. Я использовал следующий CDN вместо ионного / углового

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Но я все еще не могу заставить его работать в моем ионном веб-приложении. Кто-нибудь еще сталкивался с этой проблемой?

Источник

2 ответа

Решение

Когда я включил библиотеку, я сразу же получил следующую ошибку в браузере: Uncaught TypeError: Cannot read property 'appendChild' of null

Здесь и здесь есть похожие вопросы об этой ошибке, касающиеся разных библиотек, однако я не смог решить проблему на основе этих ответов.

Наиболее близкое решение, которое я нашел, было в этом отчете о проблеме в репозитории Plaid на GitHub. Это описывает проблему с библиотекой, не работающей, когда помещено в <head> тег. Фиксация в этом отчете о проблеме описывает, что эту проблему можно решить, включив скрипт в <body> тег вместо <head> тег.

Я бы порекомендовал подписаться на отчет о проблеме, чтобы увидеть, будут ли в будущем внедрены другие решения.

Так тдлр; Попробуйте переместить <script> тег от <head> к <body> ,

Источник

Вы можете просто использовать созданную мной простую угловую обертку:

https://github.com/khashayar/ng-plaid

Источник
Другие вопросы по тегам