How to access global js variable in AngularJS directive

Question

First of all, I checked and I didn't find any article covering my question.

How to access a pre-defined js global variable in angularJS built-in directive?

For example, I define this variable in <script>var variable1 = true; </script>

Then I write a AngularJS directive:

<div ng-if="variable1">Show some hidden stuff!</div>

This does not really work.

Then I'm informed that I should use ng-init

So I wrote code somewhere else like:

<div ng-init = "angularVariable1 = variable1"></div>

And this apparently does not work as well...this is like a vicious cycle. You need to access pre-defined js global variables, then you need to use ng-init; in order to use ng-init, you need to access global variables.

Any particular way to do this?

Adam · Accepted Answer · 2013-10-15 14:43:11Z

98

I created a working CodePen example demonstrating how to do this the correct way in AngularJS. The Angular $window service should be used to access any global objects since directly accessing window makes testing more difficult.

HTML:

<section ng-app="myapp" ng-controller="MainCtrl">
  Value of global variable read by AngularJS: {{variable1}}
</section>

JavaScript:

// global variable outside angular
var variable1 = true;

var app = angular.module('myapp', []);

app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
  $scope.variable1 = $window.variable1;
}]);

answered Oct 15, 2013 at 14:43

Adam

5,2464 gold badges23 silver badges18 bronze badges

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

6 Comments

windweller Over a year ago

This should be the most accurate answer! Thank you! Sad that I have to go through a controller to make this kind of value assignment.

km6zla Over a year ago

Will this watch the $window variable and update the scope variable when the window variable changes?

Chris Foster Over a year ago

@ogc-nick No, if $window.variable1 changes $scope.variable1 will be out of date.

drinovc Over a year ago

This is not working for me. It prints like this: Value of global variable read by AngularJS: {{variable1}}

Shane Over a year ago

If you want it to update just set an interval: $interval(function(){ $scope.variable1=$window.variable1 }, 100)

|

Juliane Holzt · Accepted Answer · 2013-10-15 14:29:49Z

12

Copy the global variable to a variable in the scope in your controller.

function MyCtrl($scope) {
   $scope.variable1 = variable1;
}

Then you can just access it like you tried. But note that this variable will not change when you change the global variable. If you need that, you could instead use a global object and "copy" that. As it will be "copied" by reference, it will be the same object and thus changes will be applied (but remember that doing stuff outside of AngularJS will require you to do $scope.$apply anway).

But maybe it would be worthwhile if you would describe what you actually try to achieve. Because using a global variable like this is almost never a good idea and there is probably a better way to get to your intended result.

answered Oct 15, 2013 at 14:29

Juliane Holzt

2,14515 silver badges14 bronze badges

2 Comments

Dave Munger Over a year ago

For me, $scope.$apply throws an error that it's already in progress. However, it doesn't actually respond to the global var change without $scope.$apply, so I seem to be in some weird catch 22. Very frustrating, as I'm trying to get a React component in ngReact to change a var that angular can respond to. Oh well.

Juliane Holzt Over a year ago

Please note that this answer is 8 years old and the whole post relates to AngularJS (i.e. "version 1"), not Angular (i.e. version 2 and later).

MediaGiantDesign · Accepted Answer · 2015-08-12 20:10:32Z

I have tried these methods and find that they dont work for my needs. In my case, I needed to inject json rendered server side into the main template of the page, so when it loads and angular inits, the data is already there and doesnt have to be retrieved (large dataset).

The easiest solution that I have found is to do the following:

In your angular code outside of the app, module and controller definitions add in a global javascript value - this definition MUST come before the angular stuff is defined.

Example:

'use strict';

//my data variable that I need access to.
var data = null;

angular.module('sample', [])

Then in your controller:

.controller('SampleApp', function ($scope, $location) {

$scope.availableList = [];

$scope.init = function () {
    $scope.availableList = data;
}

Finally, you have to init everything (order matters):

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="/path/to/your/angular/js/sample.js"></script>
  <script type="text/javascript">
      data = <?= json_encode($cproducts); ?>
  </script>

Finally initialize your controller and init function.

  <div ng-app="samplerrelations" ng-controller="SamplerApp" ng-init="init();">

By doing this you will now have access to whatever data you stuffed into the global variable.

Collectives™ on Stack Overflow

How to access global js variable in AngularJS directive

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related