如何使用 Ionic 实现 Plaid API？答案

【问题标题】：How can I implement the Plaid API using Ionic?如何使用 Ionic 实现 Plaid API？
【发布时间】：2017-02-01 22:42:15
【问题描述】：

我能够在 Web 上成功实现 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>

但我仍然无法让它在我的 ionic web 应用程序上运行。有没有其他人遇到过这个问题？

【问题讨论】：

您是否还包括来自 Plaid CDN 的 link-initialize.js？
@Phil 它包含在我的 html 文件中，所以是的，我想是的
哪个 HTML 文件？我不认为它会在你的menu.html 文件中工作，如果它在那里
@Phil 对。我把它放在我的index.html 中。附加了menu.html 内容的文件。

标签： angularjs ionic-framework plaid

【解决方案1】：

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

对于不同的库 here 和 here 有类似的问题，但是我无法根据这些答案解决问题。

我找到的最接近解决方案的是 GitHub 上 Plaid 存储库中的 this issue report。它描述了库在放置<head> 标记时无法工作的问题。此问题报告中的commit 描述了可以通过将脚本包含在<body> 标记而不是<head> 标记中来解决此问题。

我建议订阅问题报告，看看将来是否会引入其他解决方案。

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

【讨论】：

是的，我也遇到了这个错误，我会检查这些链接，看看我能找到什么。
您是否尝试将<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script> 从<head> 移动到<body>？
是的，我做到了，但仍然出现相同的错误，并且 API 无法工作。我不知道该怎么办。如果我在 github 上针对我的问题创建一个简单的公共 repo 会有帮助吗？
这真的很奇怪，当我尝试时它立即起作用。请务必创建存储库，因为我将能够在我的机器上测试您的代码并帮助您。

【解决方案2】：

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

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

【讨论】：