9

I have a third party JavaScript library (not Angular) and I would like to use its methods/objects from Angular.

I know I can place a <script type="text/javascript"> into an angular HTML view and use those methods there but that's really ugly.

How else could this be done?

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
michelem
  • 14,430
  • 5
  • 50
  • 66
  • 1
    include the library in your index.html before the – Cathal Nov 12 '14 at 16:42
  • +1 Cathal. Besides, is that a public librairie? If it is, consider checking out if an Angular module is available. – Nicolas Nov 12 '14 at 16:44
  • It's Braintree library (https://www.braintreepayments.com/docs/javascript) and they hasn't an Angular module. I tried to put it before anything else but I don't know how to register it as Angular Module/Dependency and to use it on a controller for example. – michelem Nov 12 '14 at 16:50
  • Well, you could wrap it inside a angular module, but then it wouldn't really be global. As Cathal says, just include it before including Angular and you should be fine. – SoluableNonagon Nov 12 '14 at 16:58

2 Answers2

10

Oh well, I found it, just attach to the $window and you are done.

As written here: https://developers.braintreepayments.com/javascript+node/sdk/client/setup

"The SDK will appear as braintree on the global window object."

So from your controller (for example) you can simply use $window.braintree and you got everything you need from Braintree client library.

To load the Dropin you can simply use this:

angular.module('app').controller('YourController', ['$scope', '$window',
    function ($scope, $window) {

        $window.braintree.setup('CLIENTTOKEN', 'dropin', {
            container: 'dropin'
        });

    }
]);
michelem
  • 14,430
  • 5
  • 50
  • 66
5

Include it before Angular and you should be fine

<script type="text/javascript" src="braintree.js">
<script type="text/javascript" src="angular.js">

Using it with angular should not be a problem.

Can you create a Plunker or JSFiddle of a simple problem?

Sample answer of how to use the two together: Encrypting credit card details using AngularJS in Braintree

Community
  • 1
  • 1
SoluableNonagon
  • 11,541
  • 11
  • 53
  • 98