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  lt script gt var variable1   true   lt  script gt    Then I write a AngularJS directive    lt div ng-if  variable1  gt Show some hidden stuff  lt  div gt   This does not really work   Then I m informed that I should use ng-init  So I wrote code somewhere else like    lt div ng-init    angularVariable1   variable1  gt  lt  div gt   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

User · Answer

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.

User · Answer

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    lt section ng-app  myapp  ng-controller  MainCtrl  gt    Value of global variable read by AngularJS    variable1    lt  section gt    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

User · Answer

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

[angularjs] How to access global js variable in AngularJS directive

Examples related to angularjs

Examples related to global-variables