How to access AngularJS variable from template script

Question

My controller:

$scope.totals = totals;

My template (works as expected for html injection):

{{totals}}

But what I need is to access the variable totals in a script in the template, like so:

<script>
  var totals = ????;
  // do stuff with totals
</script>

I've tried $scope.totals, $totals, {{totals}}, etc, with no avail. I would appreciate any insight, thanks!

EDIT:

The following is a jsfiddle of my controller and template. Inside of the template I'm wanting to insert a script that uses the $scope.totals variable.

http://jsfiddle.net/38CrC/

This helps stackoverflow.com/q/17960622/6521116

LF-DevJourney
– LF-DevJourney

2017-05-09 02:00:29 +00:00
Commented May 9, 2017 at 2:00 — LF-DevJourney
– LF-DevJourney, Commented May 9, 2017 at 2:00

jvandemo · Accepted Answer · 2013-06-23 10:43:50Z

14

First of all, the idea behind AngularJS is to avond situations like that.

In terms of AngularJS you woud probably be better off rethinking your application and use a directive to encapsulate the code you are currently writing in the script tags.

However, that being said, there is a way to access a scope like this:

var $element = $('#elementId');

var scope = angular.element($element).scope();

You can read the documentation for more details.

But as said, it is not a recommended practice in most cases.

Hope that helps!

Update after OP posted jsFiddle:

I created a working jsFiddle for your convenience at http://jsfiddle.net/jvandemo/hYnBa/1/

Since your example has a simple div with an ng-controller attribute, you can access the scope like this:

<script>
    $(document).ready(function(){
        var $element = $('div[ng-controller="AdminEventsCtrl"]');
        var scope = angular.element($element).scope();
        console.dir(scope);
    });
</script>

Here's what happens:

You select the element (in this case by using jQuery)
You wrap the element as an AngularJS element (exposing extra methods on the element)
You call the scope() method on the element
You can then access the scope properties e.g. scope.totals

Hope that helps!

edited Jun 23, 2013 at 10:43

answered Jun 22, 2013 at 22:47

jvandemo

13.3k2 gold badges25 silver badges18 bronze badges

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

7 Comments

reagan Over a year ago

From your question I get the following for scope:

Child {$id: "006", this: Child, $$listeners: Object, $parent:          Child, $$asyncQueue: Array[0]…}     $$asyncQueue: Array[0]     $$childHead: Child     $$childTail: Child     $$listeners: Object     $$nextSibling: null     $$prevSibling: null     $$watchers: Array[7]     $id: "006"     $parent: Child     this: Child     __proto__: Child

No where do I see the value that I want to use.

jvandemo Over a year ago

Make sure that you select an element that is bound to the scope you wish to retrieve. AngularJS builds a hierarchy of scopes and you need to select the right one. Your current sample code does not allow me to see what selector you would have to use. If you create a plnkr, I would gladly help you with that too.

reagan Over a year ago

jsfiddle.net/38CrC There's a fiddle of what I have to work with (minified of course). I hope this helps.

jvandemo Over a year ago

I added a working jsFiddle at jsfiddle.net/jvandemo/hYnBa/1 and updated my answer with extra code for your convenience.

reagan Over a year ago

This ended up not working. I had to use a directive to get the value, as I could never find the correct scope for value I was trying to get. However, your answer led me in the correct direction, so thanks for your help.

|

reagan · Accepted Answer · 2013-06-23 17:10:33Z

1

OP Answer:

I ended up having to use a directive to find the value I wanted. In the controller that set the value I wanted to use I added a directive so that it looked like this:

'use strict';

angular.module('AdminApp')
  .controller('AdminEventsCtrl', function ($scope, collection) {
    $scope.totals = collection;
  }).directive('foo', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            //Use scope.totals here
        }
    }
});

In my template I had the declaration:

<div foo></div>

This gave me the ability to do what I needed with the variable totals.

Special thanks to @jvandemo for helping me arrive at this answer.

answered Jun 23, 2013 at 17:10

reagan

6531 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to access AngularJS variable from template script

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related