Angular: Access scope from within <script> tag

Question

I have a scope variable that is being populated from my API. I can access this from HTML with the {{}} braces.

I need to pass the scope into a script file.

<script type="text/javascript"> var data = {{data}}  </script>

From what i've seen so far it seems overly complex for something relatively simple.

What is the recommended way of doing this? Isn't this quite a common problem?

Specifically, im trying to use a javascript graphical library Cytoscape.js. The graph is populated from a javascript object. I'd like to populate this javascript object from the scope. I found this:

Pass Angular scope variable to Javascript

I'm wondering whether generally this is handled in a different way in angular as it seems like a hack.

This is a good case of first explaining what you're trying to do in the first place instead of just looking for an answer. What you're describing reads like a wrong question to a correct answer. — Bwaxxlo
– Bwaxxlo, Commented Feb 3, 2016 at 20:30
If I'm correct in understanding "I can access this from HTML with the {{}} braces" to mean that angular is filling in those curlies with your desired data, then there's no reason to try to write the same data back via a script tag, just pass it to cytoscape from whichever directive or controller already has it on scope. — Daniel Beck
– Daniel Beck, Commented Feb 3, 2016 at 20:55
when I think of an "angular way" of doing this, i would use a service/factory to store data from an API call, and then inject the service/factory into the controller I want it in, and then call the data into the controller — devonj
– devonj, Commented Feb 3, 2016 at 20:55
Just to clarify, i have an api that returns data to a factory, that factory is called from the controller and works correctly. The problem is that the curly braces in HTML have access to the scope, but curly braces in JavaScript dont have access to the scope. Apparently Angular doesnt parse anything within script tags. — geoff whitehead
– geoff whitehead, Commented Feb 3, 2016 at 21:05

Pedro Souza · Accepted Answer · 2018-08-10 21:12:38Z

4

First of all to be clear, the Angular does not perform interpolation within script tags.

https://docs.angularjs.org/guide/interpolation

There are some ways around this... calling directly the value of the variable can be one of the ways:

<body ng-app="myApp">
    <div ng-controller="myController" id="yourControllerElementID">

    </div>
</body>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("myController", myController);

    function myController($scope){
        $scope.data = 'some value';
    }

    // Capturing value from outside the controller
    setTimeout(function(){
        var data = angular.element(document.getElementById('yourControllerElementID')).scope().data;
    }, 1000);
</script>

Otherwise using interpolation as you wanted , would create a hidden input with the value of the controller and capture this value with vanilla javascript or jquery:

<body ng-app="myApp">
    <div ng-controller="myController">
        <input type="hidden" id="myValueFromController" value="{{data}}" />
    </div>
</body>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("myController", myController);

    function myController($scope){
        $scope.data = 'some value';
    }

    // Capturing value from outside the controller
    setTimeout(function(){
        var data = document.getElementById("myValueFromController").value;  // or
        var data = $("#myValueFromController").val();
    }, 1000); 
</script>

Anyway let's say it would not be the Angular Way to work , but as I do not know what the scope of its development, this is the best I can tell you.

edited Aug 10, 2018 at 21:12

answered Sep 21, 2016 at 14:34

Pedro Souza

1821 silver badge8 bronze badges

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

3 Comments

Sachin HR Over a year ago

Its not working for me the first approach.Cannot read property 'data' of undefined

Sachin HR Over a year ago

And the second approach giving {{data}} as the result instead of 'some value'.

Pedro Souza Over a year ago

You're right. The two situations fail because the Angular does not have the time to take action. I'll add a setTimeout and update the response.

Collectives™ on Stack Overflow

Angular: Access scope from within <script> tag

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related