How to pass of angular $scope variable to JavaScript normal variable

Question

Here is my Angular $scope.variable.

$scope.users = {
 id : '',
 fullName : '',
 email : '',
 profile_picture_url : ''
 }
 $scope.comments = {
 commentId : '',
 created_by_current_user : '',
 created_by_admin : '',
 user_has_upvote : '',
 creator : '',
 fullName : '',
 content : '',
 created : '',
 modified : '',
 upvote_count : '',
 profile_picture_url : '',
 pings : '',
 parent : '',
 uniqueId : '',
 postId : ''
 }

Im just getting the array of objects from the HTTP service and storing as angular variable. Here is my angular controller

$scope.getByPost = function(postId) {
 console.log('getpost')
 $scope.user = $cookieStore.get('currentApp');
 console.log($scope.user.uniqueId);
 $scope.getUsers();
 appService.getUserByPost($scope.user.uniqueId, postId)
 .then(function(data) {
 console.log("Comments" + data)
 $scope.comments = data;
 });
 };
 $scope.getUsers = function() {
 console.log('getpost')
 appService.fetchAllUsers().then(function(data) {
 console.log("Users" + data)
 $scope.users = data;
 }, function(error) {
 console.log('Error ' + error)
 })
 };

Now I need to pass these variables to another normal JavaScript file for the DOM Operation. I did like this.

 var dom_el = document.querySelector('[ng-controller="appController"]');
 var ng_el = angular.element(dom_el);
 var ng_el_scope = ng_el.scope();
 var commentsArray = ng_el_scope.comments;
 var usersArray = ng_el_scope.users;

Not working. please tell me to solve this.

• ABOS: It depends on whether the dom has been created or not before you query it. in your case, it seems it is not
• CrazyMac: In Angular, if you would like to share the variable across the application, then better to keep it in Angular service or factory and use it where needed
• Korbin: have you tried this solution in stack stackoverflow.com/questions/17960622/…
• user6789906: @k185 Yes this is what i tried but it doesn't working. getting undefined value.
• Claies: what are you trying to accomplish with this DOM operation? why is it something that angular can't manage through it's normal bindings?

Answer 1

savethe value in your current controller to $rootscope like this $rootscope.users = data; use $rootscope.requiredValue=$rootscope.users; in other angular js page .

Answer 2

Try to use window.onload, like:

window.onload=function(){
 var dom_el = document.querySelector('[ng-controller="appController"]');
 var ng_el = angular.element(dom_el);
 var ng_el_scope = ng_el.scope();
 var commentsArray = ng_el_scope.comments;
 var usersArray = ng_el_scope.users;
}

Or you can try to with setInterval because maybe your js code is running before angular finalize completely

Answer 3

Try using like this:

Declare the JavaScript function as below

window.sample = function(comments)
{
 // do something
}

call this function in success callback

window.sample(data)