Retrieving a universal variable within AngularJS

Question

Retrieving a universal variable within AngularJS

Is there a way to initialize an Angular model using a JSON object that is embedded within an HTML page? Take this as an example:

<html>
  <body>
    <script type="text/javascript" charset="utf-8">
      var tags = [{"name": "some json"}];
    </script>
    <ul>
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </body>
</html>

The tags field doesn't resolve because it's being looked up in the $scope. I attempted to access the tags field in my controller like so:

function TagList($scope, $rootScope) {
  $scope.tags = $rootScope.tags;
}

However, this method isn't successful.

It only works if I directly include the TagList within the HTML page and render the JSON directly into this function.

Is there a way to access the tags field in a separate JavaScript file within an Angular controller?

javascript json angularjs

Answer 1

Answer №1

There are a couple of methods you can use:

To begin with, create your tags array in a separate script block, which will bind your tags variable to the window object. Then inject $window into your controller to access these window-bound variables.
Alternatively, declare your tags array within the ng-init directive.

Here are both solutions demonstrated:

HTML:

<body>

  <script type="text/javascript" charset="utf-8">
    var tags = [{"name": "some json"}];
  </script>

  <div ng-controller="AppController">
    tags: {{tags | json}}
    <ul>
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </div>  

  <div>
    <ul ng-init="tags = [{name: 'some json'}]">
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </div>

</body>

JS:

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

Plnkr

I recommend avoiding cluttering the window object with unnecessary variables.

Answer 2

There are a couple of methods you can use:

To begin with, create your tags array in a separate script block, which will bind your tags variable to the window object. Then inject $window into your controller to access these window-bound variables.
Alternatively, declare your tags array within the ng-init directive.

Here are both solutions demonstrated:

HTML:

<body>

  <script type="text/javascript" charset="utf-8">
    var tags = [{"name": "some json"}];
  </script>

  <div ng-controller="AppController">
    tags: {{tags | json}}
    <ul>
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </div>  

  <div>
    <ul ng-init="tags = [{name: 'some json'}]">
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </div>

</body>

JS:

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

Plnkr

I recommend avoiding cluttering the window object with unnecessary variables.

Retrieving a universal variable within AngularJS

Answer №1

Similar questions

Error: Attempting to convert a circular structure to JSON in Node.js

Navigating an Array in Typescript

Utilizing Flutter and Dart to efficiently convert JSON time series data into a map structure containing key-value pairs

Using the base tag in Angular HTML5 mode can cause script links to break

Using a data() object in Vue to fill out form fields efficiently

Using AngularJS to dynamically populate select options from an array of objects within an object

Testing an ExpressJS route and their corresponding controller individually: a step-by-step guide

"Dynamically moving" background on canvas

Issue with Datatables FixedColumns plugin in IE8/7 and Firefox

The successful JSON response in an Ajax request is not functioning as expected

Serve JSON response as text/json in Scala Play 2.1

The progress bar for uploading a file is causing issues with the redirect function in the

Top approach for triggering and re-triggering AJAX using php

Implementing Express 4: The Correct Way to Serve Routes from External Files

What is the best way to incorporate CDN into my webpack build process?

Traverse dictionaries in jq shell

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Issue with Material UI tool tip not closing upon clicking on an element is persistent

ng filtering with a controller-defined scope

Error encountered when URLSearchParams attempts to add an array