如何获得<script> to share data to Angular Controller?

Question

I am using in unison ASP.NET (aspx web forms) with C# and AngularJS. I have some script in my index.html file:

<script>
    function get_stuff(){
       var stuff = document.getElementById("stuff_here").value;
       console.log(stuff);
       // output: [{"name":"toy duck", "color":"yellow"},{"name":"flute", "color":"white"}]
    }
</script>
<input type='hidden' id='stuff_here' value='...' />
<button onclick="get_stuff()">RUN</button>

The output is as desired. However, I want to be able to access the output from my Angular controllers, such as using ng-click on the button and having an angular function do the same stuff. Unfortunately ng-click does not work when the button is pressed. I have also tried putting var stuff as a global variable outside the function, but my Angular functions cannot pick up it either.

How can I get the object?? Thanks in advance for the help!

Answer 1

You can hold bootstrapped application data as an Angular service or, to be more exact, an Angular provider.

<script>
    var stuff = document.getElementById("stuff_here").value;
    angular.module("myApp").value("myProviderStuff", stuff);
</script>

Then within your angular app,

var module = angular.module("myApp");
module.controller("SomeController", function($scope, myProviderStuff) {
$scope.stuff = myProviderStuff;