Sending a javascript variable to an angularjs scope

Question

Sending a javascript variable to an angularjs scope

Currently, I am utilizing Flask to render an HTML template and wish to transfer the variable add_html_data, which is passed via Flask's render_template, to the scope of an AngularJS controller.

I have attempted the following:

<body>
    <div ng-controller="layoutController" ng-init="entries= {{ add_html_metadata|tojson }}"/>
</body>

In this scenario, the {{}} denotes Flask variables (I modified AngularJS binding syntax to {[{}]}).

Additionally, I tried creating an intermediate JavaScript variable:

<script type="text/javascript">var entries = {{ add_html_metadata|tojson }}</script>

Nevertheless, I am still unable to discern how to link it to the controllers scope.

Appreciate any help provided.

javascript angularjs flask

Answer 1

Answer №1

To begin, consider implementing an init() function within your controller:

app.controller('layoutController', function($scope) {
    $scope.init = function(html_metadata) {
        $scope.html_metadata = html_metadata;
    }
});

Subsequently, in your template, you can execute this function with the provided data:

<body>
    <div ng-controller="layoutController" ng-init="init({{ add_html_metadata|tojson }})"/>
</body>

Answer 2

To begin, consider implementing an init() function within your controller:

app.controller('layoutController', function($scope) {
    $scope.init = function(html_metadata) {
        $scope.html_metadata = html_metadata;
    }
});

Subsequently, in your template, you can execute this function with the provided data:

<body>
    <div ng-controller="layoutController" ng-init="init({{ add_html_metadata|tojson }})"/>
</body>

Answer 3

Answer №2

Perhaps @Miguel's suggestion could be effective, however, my approach would involve creating a RESTful request to fetch the JSON data labeled as add_html_metadata. Utilizing a $http call to assign this data to the controller's scope is considered the AngularJS methodology. The implementation could look something like the following:

@app.route("/retrieve_html_metadata", methods=["GET"])
def fetch_html_metadata():
   # perform necessary actions here
   return jsonify(html_metadata)

Correspondingly, within the AngularJS controller:

myApp.controller('layoutController', ['$scope', function($scope) {

  $http({method: 'GET', url: '/retrieve_html_metadata'}).
    success(function(data, status, headers, config) {
      $scope.html_metadata = data;
   }); 
}]);

Answer 4

Perhaps @Miguel's suggestion could be effective, however, my approach would involve creating a RESTful request to fetch the JSON data labeled as add_html_metadata. Utilizing a $http call to assign this data to the controller's scope is considered the AngularJS methodology. The implementation could look something like the following:

@app.route("/retrieve_html_metadata", methods=["GET"])
def fetch_html_metadata():
   # perform necessary actions here
   return jsonify(html_metadata)

Correspondingly, within the AngularJS controller:

myApp.controller('layoutController', ['$scope', function($scope) {

  $http({method: 'GET', url: '/retrieve_html_metadata'}).
    success(function(data, status, headers, config) {
      $scope.html_metadata = data;
   }); 
}]);

Answer 5

Answer №3

My knowledge of flask is limited, but I suggest utilizing ng-include

Answer 6

My knowledge of flask is limited, but I suggest utilizing ng-include

Sending a javascript variable to an angularjs scope

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript's counter variable can become confusing when used in an if statement

Guide on receiving application/csp-report as json in an express application utilizing bodyParser

The VueJS app seems to be experiencing difficulties with rendering the content

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

Does Angular trigger an HTTP request when a variable's scope is updated?

Using Angular 10 to make an HTTP POST request, with the goal of appending a string

Spinning a line in three.js along the circumference of a circle

Adjust the size of the iframe image to fit seamlessly within the design

After creating a new Packery using AngularJS, the getElementById function may return null

Is it possible to send both props and a function within a single onClick event in React?

Utilize jQuery to transform array values into date objects

Encountering difficulties accessing the array in the controller through ajax

How can I ensure that $routeProvider functions correctly within my AngularJS application?

Is it possible to modify the cell color or highlight in Excel through Node.js?

Is it possible to stack one Canvas on top of another?

Ways to launch the React Material date picker while hiding the date input field

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

Tips for adding and removing active class with navbar links using JavaScriptonclick

Tips for populating an array with boolean values when a checkbox change event occurs:

Tips for successfully passing ExpressJS locals variable to an EJS template and utilizing it as a parameter when invoking a JavaScript function during the onload HTML event