Here's a dilemma I'm facing. I have a third-party script that needs to be integrated into my AngularJS application, within the HTML using a <script> tag. My goal is to pass scope variables (such as name and email) to this script. Initially, I am exploring if it's possible to pass a scope variable from the controller to a script tag during page load. Alternatively, I consider transforming the script into a template, but I am unsure of the best approach. I am concerned that even if I manage to achieve the basic concept, the script tag might render actual data before the variable is successfully passed.
Below is the snippet of HTML:
<body>
<div ng-controller="MainCtrl">
Angular variable: {{foo}}
</div>
</body>
<script type="text/javascript">
console.log(foo); // Is it $scope.foo?
</script>
This is how the controller is set up:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.foo = 'bar';
})
You can view the Plunker example here: https://plnkr.co/edit/5rcnqUxHRHMthHmkwVuZ?p=preview