如何使用 Ionic 实现 Plaid API？

Question

我能够在网络上成功实施 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>

我在 html 正文中包含以下 javascript...

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

现在我想用 angular 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 复制了一个 Web 应用程序版本并且它有效。我使用以下 CDN 而不是 ionic/angular 一个

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

但我仍然无法让它在我的离子网络应用程序上运行。还有其他人遇到过这个问题吗？

Answer 1

当我包含该库时，我立即在浏览器中收到以下错误：Uncaught TypeError: Cannot read property 'appendChild' of null

关于不同库的这个错误也有类似的问题 and ，但是我无法根据这些答案解决问题。

我找到的最接近解决方案的是在这个问题报告中的 this issue report within the Plaid repository on GitHub. It describes a problem with the library not working when placed in the <head> tag. A commit 中描述了这个问题可以通过将脚本包含在 <body> 标签而不是 [=11] 中来解决=] 标签。

我建议订阅问题报告，看看未来是否会推出其他解决方案。

所以 tldr；尝试将 <script> 标签从 <head> 移动到 <body>.

Answer 2

您可以简单地使用我创建的普通 angular 包装器：

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

如何使用 Ionic 实现 Plaid API？

How can I implement the Plaid API using Ionic?

angularjs

ionic-framework

plaid