Pass javascript variable to angularjs scope

Question

I am using flask to render an html template. I would like to pass variable add_html_data, that I pass through flask's render_template, to an AngularJs controllers scope.

I tried

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

In this case {{}} represent flask variables (I changed angularjs binding syntax to {[{}]}).

Also, I tried creating an intermediary javascript variable

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

But, still cannot figure out how to attach it to the controllers scope.

Thanks for any assistance

You now have a global variable entries. Since global variables are available anywhere in js code.... inside an angular controller or directive or service $scope.entries=entries. — charlietfl
– charlietfl, Commented Nov 4, 2013 at 20:21

Miguel Grinberg · Accepted Answer · 2013-11-05 01:25:12Z

2

You can create an init() function in your controller:

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

Then in your template you can invoke this function with the data:

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

answered Nov 5, 2013 at 1:25

Miguel Grinberg

68.1k14 gold badges143 silver badges160 bronze badges

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

Comments

reptilicus · Accepted Answer · 2013-11-05 06:11:18Z

1

I think @Miguel's answer may work, but I would just create a restful call to return the JSON blob of data defined as add_html_metadata, and use a $http request to put that on the controller's scope, thats the angular way to do things. Something like this:

@app.route("/html_metadata", methods=["GET"])
def get_html_metadata():
   #do something in here
   return jsonify(html_metadata)

And in the angular controller

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

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

answered Nov 5, 2013 at 6:11

reptilicus

10.4k6 gold badges59 silver badges80 bronze badges

Comments

Maxim Shoustin · Accepted Answer · 2013-11-04 20:17:41Z

0

I have no experience with flask, anyways, Try to use ng-include

answered Nov 4, 2013 at 20:17

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Collectives™ on Stack Overflow

Pass javascript variable to angularjs scope

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related