How to pass array values from javascript to angularjs controller

Question

I am trying to pass values which I am getting from an array from JavaScript file and pushing it to angularJS by using a global variable

In angular file, I am trying to get those values by accessing global variable like but it returns me undefined however I ran

How can I access this values in my controll

Answer 1

By the example you have shown above.

1. You are not pushing the values in the globalarray. by not calling the abc() function.

2. If your globalarray variable is window level global it would be available from anywhere in your angular app.

Please observe the behavior in the fiddle I've made for demonstation. I've also made a plunk so you would understand clearly.

Fiddle

var globVar = [12 ,33];
var myApp = angular.module('myApp', []);    
myApp.controller('MyController', function($scope) {      
  $scope.globVar = globVar;
}); 

Update

Since the data came in a callback you needed to re run the digest cycle and update the variable. Please observe this fiddle as it has your coordinates init.

// we got the cords
var cords = ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');

// we get the scope from the element that has the controller binded to it.
var scope = angular.element(document.getElementById("MainWrap")).scope();

// we call a digest cycle of angular to update our scope variable sinse it comes in a callback when angular is loaded
scope.$apply(function () {
   scope.updateCords(cords);
});

Working Fiddle

Hope now it helps.

Answer 2

Try this:

$scope.globalarray = [];

function abc() {
   var array = [4,5]
   angular.forEach(array,function(k,v){
     $scope.globalarray.push(k); 
  })

}

Answer 3

have a look at this link:

AngularJS access scope from outside js function

you can think of it in a different way, once you have access to the scope, you simply call a setter method inside the controller with the data in your array and then you can do whatever you need. I have used this approach in a project and it works quite well.

example :

//externalScope is a global variable declared in the angular controler //this is a way to access the controller and trigger methods from outside of angular //all we want is to signal to angular that some data has been changed so it can do something. in my example selectedUserValue is the data bit I am passing to the controller.

if (externalScope) {
    externalScope.$apply(function () {
        externalScope.selectUser(selectedUserValue);
    });
}

this code lives outside of the controller wherver you try to call the scope method with some data

now in the actual controller we have something like this:

    var externalScope;

    (function () {
   controller code

somewhere in the controller :

externalScope = $scope; //this exposes the scope to the outside world

notice how the externalScope variable is declared outside of the controller so it will be global.

After this just code whatever you need in the angular method that you call from the outside.

in my case it's a setter and then it calls something else which makes use of that data:

$scope.selectUser = function (userID) {
            if (userID && userID !== $scope.selectedUserID) {
                $scope.selectedUserID = userID;
                $scope.loadUserRecords();
            }
        };

Hope this makes sense. Disclaimer ... This isn't what I call something trivial and should only be used if you really have no other option!

Answer 4

Global variables is not a good idea, maybe you need to interact with another web or framework.

Is you should ouse a global variable, you can declare with a special script in index.html

<script type="text/javascript">    
 let globalarray; 
</script>

You also could asign the globalarray to a property of window

window.globalarray

Or $rootScope.