How to retrieve data returned from AngularJS in another javascript script

Question

I am using Angular to get output from controller and displaying with ng-bind. but I have a completely separate javascript which would need to use a value returned from angular.

In the code below the TestAppCtrl is called and the output shows correctly in the DOM but when I try to show in the alert box in the second script, it shows as undefined. I have tried multiple things even in my second script getting by element and getting inner html, etc but its always undefined.

<html ng-app="testApp">
<head><script src="lib/angular.min.js"></script> </head>
<body>

    <div ng-controller="TestAppCtrl">
       <div id="data"><span ng-bind="data" ></span></div>
     </div>

  <script>

     var testApp = angular.module('testApp', []);

       testApp.controller('TestAppCtrl', function ($scope) {
       $scope.data = [1, 2, 4, 5];
       });

    </script>



    <script>
    window.alert(data);
    </script>


</body>
</html>

data from controller is really this simple? No HTTP service involved? — André Werlang
– André Werlang, Commented Nov 18, 2014 at 22:52

sylwester · Accepted Answer · 2014-11-18 22:30:07Z

3

Please see below for working demo.

var app = angular.module('app', []);

app.controller('TestAppCtrl', function($scope) {
  $scope.data = [1, 2, 4, 5];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="TestAppCtrl" id="TestAppCtrl">
    {{data | json}}
  </div>

  <script>
    angular.element(document).ready(function() {

      var controllerElement = document.querySelector('#TestAppCtrl');
      var controllerScope = angular.element(controllerElement).scope();
      alert(controllerScope.data);
    });
  </script>
</body>

answered Nov 18, 2014 at 22:30

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

3 Comments

Eddie Martinez Over a year ago

Thanks a lot! Do you know any pages where I can read up on this way of accessing angular ?

sylwester Over a year ago

@EduardoDennis unfortunately not :(

Eddie Martinez Over a year ago

no worries, just wondering since I hadn't seen the angular.element() yet. I am just starting with angular though so maybe later. Thanks nonetheless for your help :D

Anubhav · Accepted Answer · 2014-11-18 22:14:42Z

0

<html ng-app="testApp">
    <body>

        <div ng-controller="TestAppCtrl">
            <div id="data"><span ng-bind="data" ></span></div>
        </div>

<script>
    var stuff;
    var testApp = angular.module('testApp', []);

    testApp.controller('TestAppCtrl', function ($scope) {
        $scope.data = [1, 2, 4, 5];
        stuff = $scope.data; // try this?
    });


</script>



<script>
    window.alert(stuff);
</script>

EDIT

Okay so maybe initializing stuff inside the controller would help.

edited Nov 18, 2014 at 22:14

answered Nov 18, 2014 at 22:08

Anubhav

7,2465 gold badges23 silver badges34 bronze badges

1 Comment

Eddie Martinez Over a year ago

it returns undefined, I imagine because the controller is a async the second script gets executed before the stuff variable is populated. I f I hardcode a value into the variable it will show.

Collectives™ on Stack Overflow

How to retrieve data returned from AngularJS in another javascript script

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related