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, Jun 24 '15 at 09:23
if `ePayCode` is declared globally then you should be able to directly assign the value `ePayCode = $scope.buysum * 100;` — Divya MV, Jun 24 '15 at 09:39
if they're not declared in a function, then they are global. at the moment they are global — Ana F, Jun 24 '15 at 10:11
I tried with the ePayCode = $scope.buysum * 100; in the Angular controller, at that didn't change the value in the common JavaScript.. — Delete me, Jun 24 '15 at 10:46

score 2 · Answer 1 · answered Jun 24 '15 at 10:55

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 '15 at 10:55

Ana F

641
4
13

It seems like I have a timing issue with this.. Could I call a common JavaScript function from the Angular Controller? – Delete me Jun 24 '15 at 12:18
1

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) – Ana F Jun 24 '15 at 12:32
That woks great.. Thak you!! – Delete me Jun 24 '15 at 13:16

Sidharth Panwar · Answer 2 · 2015-06-24T11:13:34.003

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 '15 at 11:13

answered Jun 24 '15 at 09:58

Sidharth Panwar

4,606
6
27
36

Do you have a Fiddler or Github example of this? – Delete me Jun 24 '15 at 10:44
As I understand the solution, the data is send from common JavaScript ot angular?? Correct me is Im wrong? – Delete me Jun 24 '15 at 11:34
Yes. You are correct. The variable test in the plunker is a simple JS variable and is being injected into Angular. – Sidharth Panwar Jun 24 '15 at 11:36

Pass angular value to common JavaScript

2 Answers2