Accessing AngularJS variable in view?

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?

angular.element(document.getElementById("mainBody")).scope().myVariable should work - what is the output — tymeJV
– tymeJV, Commented May 27, 2014 at 20:27

Dalorzo · Accepted Answer · 2014-05-27 20:42:40Z

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

edited May 27, 2014 at 20:42

answered May 27, 2014 at 20:30

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

Comments

Steve · Accepted Answer · 2014-05-27 20:29:10Z

0

Pass the var to $window to expose it to your JS.

$window.myVariable = $scope.myVariable;

answered May 27, 2014 at 20:29

Steve

5691 gold badge8 silver badges20 bronze badges

2 Comments

user3681259 Over a year ago

I was trying to do that, but it didn't work. ... samplefunction( $window.myVariable )

Steve Over a year ago

Is that function in your vanilla JS? Or in Angular?

TGH · Accepted Answer · 2014-05-27 20:29:44Z

0

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>

answered May 27, 2014 at 20:29

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Collectives™ on Stack Overflow

Accessing AngularJS variable in view?

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related