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 plex for something relatively simple.
What is the remended way of doing this? Isn't this quite a mon 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.
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 plex for something relatively simple.
What is the remended way of doing this? Isn't this quite a mon 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.
Share Improve this question edited May 23, 2017 at 10:32 CommunityBot 11 silver badge asked Feb 3, 2016 at 20:16 geoff whiteheadgeoff whitehead 671 silver badge7 bronze badges 4- 3 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 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 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 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 Commented Feb 3, 2016 at 21:05
1 Answer
Reset to default 4First of all to be clear, the Angular does not perform interpolation within script tags.
https://docs.angularjs/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.