访问视图中的AngularJS变量？

Question

Consider basic AngularJS application with just one controller. Inside the controller I have set-up "myVariable" to hold a value "Test".

I am given an inline JavaScript code in the view and I need to call a function samplefunction which takes a parameter using myVariable .

/* Controllers */

angular.module('myApp.controllers', [])
    .controller('MainCtrl', ['$scope', function($scope) {

        $scope.myVariable = "Test";

    });

In the view, in the html file, this is what I need to do:

<script type="text/javascript">

    var param1 = {{myVariable}};   /* <-- how to make this work?  */
    samplefunction( param1 );   

</script>

It doesn't work though. I just need to assign myVariable value to the param1 . I also tried something like:

...
var param1 = angular.element(document.getElementById("mainBody")).scope().myVariable
...

But this didn't work either. Please, note that I cannot touch the given JS code that I am calling in the view.

Anyone knows how to solve this simple issue?

Answer 1

From my POV what you are doing shouldn't be done. The closest correct approach should be:

Setting your view with a value in the way angular was meant to be used:

<input type="text" ng-model="myVariable" id="myVar" />

and iff you want to you get your var value get it from the view like:

<script type="text/javascript">  
    var param1 = document.getElementById("myVal").value;
    samplefunction( param1 );   
</script>

Online Demo

Answer 2

将var传递给$ window以将其公开给您的JS。

$window.myVariable = $scope.myVariable;

Answer 3

What about binding the scope variable to a data-something attribute on an element in your view, and then pull it using Jquery in your external script tag?

<script type="text/javascript">  
    var param1 = $("#someId").data("myValue");
    samplefunction( param1 );   
</script>