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

Is there a way to transfer a JSON object to Excel using Nextjs/React?

Tips for creating basic Jasmine and Karma tests for an Angular application to add an object to an array of objects

Reveal content as you scroll

Struggling to make changes to a Styled Component in a React application

Is it necessary to sanitize input fields manually in Angular 6?

Utilizing JavaScript and jQuery to make a query to mySQL

I am experiencing an issue where the ng-message is not appearing during validation

Creating a webpage with a feature that allows users to click a button and instantly change the background to a

As I attempted to set up sb-admin-bs4-angular2-master, an application built with Node.js, I encountered an error message while running the npm install command

How can I implement a single-column search feature in a GridView using Javascript in ASP.NET?

Designing Angular 1 table row components with future migration to Angular 2 in consideration

Using AJAX to invoke a REST service endpoint

Encountering an issue while attempting to extract an ACF field in WordPress using JavaScript

Angular 2 - Circular dependencies leading to the error message "unexpected value undefined"

Fetching Data Using Cross-Domain Ajax Request

What is the reason for the continual influx of new users being added to the database?

How can conditional types be implemented with React Select?

Spinning a CSS object around an axis

Picked (chosen-js): Steps to deselect options using a variety of selectors

We could not find the requested command: nodejs-backend