How to access AngularJS variable from template script

javascript html angularjs angularjs-scope

33,716

Solution 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.

Solution 2

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!

33,716

Author by

reagan

Computer Scientist out of Baylor University

Updated on June 24, 2020

Comments

reagan almost 4 years
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/
reagan almost 11 years

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 almost 11 years

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 almost 11 years

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

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

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.
jvandemo almost 11 years

You can just use scope.totals to access the data (see updated jsFiddle on jsfiddle.net/jvandemo/hYnBa/2) but as suggested, using a directive is indeed a better and cleaner way in terms of AngularJS so your new code is definitely better. Glad to see you improved your code!
Frane Poljak about 6 years

If debugInfo is disabled, and it should be in production, then you can't access the scope of angular element.