Pass angular value to common JavaScript

Question

I am trying to pass a value from angular scope to common JavaScript.

The JavaScript is like this

<script type="text/javascript">
var epaycode = null;
var epaybuysum  = null;
paymentwindow = new PaymentWindow({
'merchantnumber': epaycode,
'amount': epaybuysum,
'currency': "DKK",
'windowstate': "4",
'paymentcollection': "1",
'iframeheight': "250",
'iframewidth': "500"
});
paymentwindow.append('payment-div');
setTimeout(function(){
    paymentwindow.open();
}, 1000);

The angular controller code is like this

    $scope.showpay = function () {
    $window.epaybuysum = $scope.buysum * 100;
    $window.epaycode = $scope.ePayCode;
};

The Angular showpay() function is called after the common JavaScript is initialized. The buysum and ePayCode is set earlier in the program. They have value and is tested with console.log().

Why doesn't the epaybuysum and epaycode getting transferred to the common JavaScript? Is there any other solutions to passing values to common JavaScript from Angular controllers?

Have you debugged showpay function? Does it hit those lines of code setting to $window? — Curtis
– Curtis, Commented Jun 24, 2015 at 9:23
if ePayCode is declared globally then you should be able to directly assign the value ePayCode = $scope.buysum * 100; — Divya MV
– Divya MV, Commented Jun 24, 2015 at 9:39
if they're not declared in a function, then they are global. at the moment they are global — Ana F
– Ana F, Commented Jun 24, 2015 at 10:11

Ana F · Accepted Answer · 2015-06-24 10:55:24Z

2

Have a look at this plunker: http://plnkr.co/edit/lQiXpObbWuG84CNbcZt2?p=preview

 <div ng-controller="MainCtrl">
      <input ng-model="buyCode">
      <input ng-model="buySum">
      <p>{{buyCode}} ... {{buySum}}</p>

      <button ng-click="showPay()">call showPay</button>
 </div>

 <button onclick="buttonClick()">Console.log</button>

The first button calls your showPay function(the one on scope). The second button calls console.log (outside the angular controller, simple js). For this simple usecase it seems to work as expected. How are you calling showPay function?

answered Jun 24, 2015 at 10:55

Ana F

6514 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Delete me Over a year ago

It seems like I have a timing issue with this.. Could I call a common JavaScript function from the Angular Controller?

Ana F Over a year ago

yes. with $window you have access to all globally defined js (including functions). So you can do: $window.myFunction() -- if myFunction is declared at top level(not within another function)

Delete me Over a year ago

That woks great.. Thak you!!

Sidharth Panwar · Accepted Answer · 2015-06-24 11:13:34Z

0

Try this:

(function (angular, epaycode) {  
  'use strict';  
  var module = angular.module('abc', []);  
  //Your controller etc.  
  }  
})(angular, epaycode);

Updated
The plunker in the comments section shows how you can do this.

edited Jun 24, 2015 at 11:13

answered Jun 24, 2015 at 9:58

Sidharth Panwar

4,6646 gold badges31 silver badges36 bronze badges

3 Comments

Delete me Over a year ago

Do you have a Fiddler or Github example of this?

Delete me Over a year ago

As I understand the solution, the data is send from common JavaScript ot angular?? Correct me is Im wrong?

Sidharth Panwar Over a year ago

Yes. You are correct. The variable test in the plunker is a simple JS variable and is being injected into Angular.

Collectives™ on Stack Overflow

Pass angular value to common JavaScript

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related