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?

Answer 1

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; }]); 

Answer 2

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.