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/

Answer 1

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!

Answer 2

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.