accessing global variables in angular scope

Question

In http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_object

instead of

  <div ng-app="" ng-init="names=[
  {name:'Jani',country:'Norway'},
  {name:'Hege',country:'Sweden'},
  {name:'Kai',country:'Denmark'}]">

Is there a syntax to refer to an external variable declared elsewhere in ng-init (and NOT declared in angularjs controller) as this one doesn't work:

  <script>
  var myNames = [
  {name:'Jani',country:'Norway'},
  {name:'Hege',country:'Sweden'},
  {name:'Kai',country:'Denmark'}]
  </script>

  <div ng-app="" ng-init="names=myNames">

I know it's bad practice but I use another framework also and don't want to duplicate the content of the variable. And it's just for prototyping not code for real app.

Or else if I use ng-init initial declaration, can I refer it from another script variable ?

no, there isn't, partially because of the way that angular scopes work, partially because ng-init is a directive (so you are passing an expression), and partially because except for extremely simple proof of concept, this isn't something you should use ng-init for anyway. — Claies
– Claies, Commented Jan 8, 2017 at 15:39
That demo is a classic display of w3schools promoting bad practices that go against angular docs recommendations — charlietfl
– charlietfl, Commented Jan 8, 2017 at 15:56

Aravind · Accepted Answer · 2017-01-08 17:19:02Z

1

It will not work because of the following reasons

Script tag is for to the html document's javascript. It has no relationship with angular's ng-init directive.
The angular documentation about ngInit directive warns as shown below.

Best practise is to go with controllers when these kind of situations arises.

Updated as per the discussion in chat

<body>
  <script>
  var myNames = [
  {name:'Jani',country:'Norway'},
  {name:'Hege',country:'Sweden'},
  {name:'Kai',country:'Denmark'}];

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

  app.controller('myController',function($scope){

        $scope.names=window.myNames;

  });
  </script>
    <div ng-app="myApp" ng-controller="myController">
        <p>Looping with objects:</p>
        <ul>
          <li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li>
        </ul>
    </div>
</body>

edited Jan 8, 2017 at 17:19

answered Jan 8, 2017 at 15:47

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

7 Comments

user310291 Over a year ago

I know it's bad practice but I use another framework also and don't want to duplicate the content of the variable.

Aravind Over a year ago

you can access that variable using window.myNames. else where in html document, but you can't use it in the angular ng-init.

user310291 Over a year ago

not sure to understand: if I use ng-init initial declaration, can I refer it from another script variable or I can't either ?

Aravind Over a year ago

by another script variable what you exactly mean about? Another <script> </script> tag in the document? In any ways ngInit does not gets initialised that way.

Aravind Over a year ago

do u want the variable myNames to be used in the ng-repeat, this can be achieved without ng-init?

|

Collectives™ on Stack Overflow

accessing global variables in angular scope

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related