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

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.

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       lt script src  https   ajax googleapis com ajax libs angularjs 1 3 15 angular min js  gt  lt  script gt     lt script src   path to your angular js sample js  gt  lt  script gt     lt script type  text javascript  gt        data    lt    json encode  cproducts     gt     lt  script gt    Finally initialize your controller and init function      lt div ng-app  samplerrelations  ng-controller  SamplerApp  ng-init  init     gt    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

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

Examples related to angularjs

Examples related to global-variables