Using a variable within AngularJS expression?

Question

I'm new to Angular, but I was wondering am I able to use a JS variable within an AngularJS expression (not sure if it's called an expression). The simplest way I can demonstrate is this:

<code>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var number = 10;
    </script>
    <div ng-app="">
        <p>My expression: {{ 5 + number}}</p>
    </div>
</code>

Is there a way I do this?

Why do you have variables existing outside controllers/services/etc ? — Omri Aharon
– Omri Aharon, Commented Jun 14, 2015 at 12:18
cant be done. But if you're really desperate you can have "number" in window object and in your controller can do something like $scope.number = window.number and then use it. Wont suggest that though. — Amit
– Amit, Commented Jun 14, 2015 at 12:30

dfsq · Accepted Answer · 2015-06-14 12:18:39Z

4

No, you cannot use global variables (or functions) in Angular expressions. Angular expressions are just attributes, so are strings and not Javascript code. Angular parser ($parse service, sourse code) takes those attributes, parses them and evaluates against scope object of the Angular app. So in order to use anything in Angular expression it must be defined on the corresponding scope object.

answered Jun 14, 2015 at 12:18

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

crbon Over a year ago

Thanks for that. But are you able to direct me in how I would go about doing the following. In link, i need to be able to use different strings (eg. 'GoPro' - which is used in the example). So when a product is clicked the specific content of that product is displayed '{{ products[0].GoPro.Description }}'. Help would be greatly appreciated

n00b · Accepted Answer · 2015-06-14 12:34:07Z

You are not supposed to. You are going to kill the whole purpose of Angular if you do so. And won't work how you put it. Still I made a Plunker for you here. After all a global JavaScript variable can be access from inside your controller if it was defined before your controller code.It is all JavaScript after all

http://plnkr.co/edit/LiwvNd4Nf5lW0HUsSyyq?p=preview

in HTML

<script>
  var x = 7;
</script>

and in controller

// in the controller
    $scope.Foo=function(){
      return $scope.Page + x;
    }

Collectives™ on Stack Overflow

Using a variable within AngularJS expression?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related