Passing a string from flask to angularjs

Question

I pass a variable from flask to a template like this

    @app.route('/')
    def respond():
        return render_template('index.html', bar='foo')

In angularjs controller attached to the body of that page I have a function like this:

$scope.init = function(bar){
        $scope.content = bar;
    }

I am trying to pass this variable from flask to angular in the template like this:

<body ng-init="init({{ bar|tojson|safe }})" ng-controller="AppCtrl">

But in the end the tag in DOM is messed up

<body ng-init="init("foo")" ng-controller="AppCtrl">

The problem with this are quotation marks. Browser cannot interpret them properly and the variable isn't passed.

So my question is how can I solve this? I don't want to make another http request from angular controller just to get that data.

edit.

<body ng-init="init('{{ bar }}')" ng-controller="AppCtrl">

seems to have fixed it

<body ng-init="init('foo')" ng-controller="AppCtrl"> this should be fine..use single quote for inner variables.. — Pankaj Parkar
– Pankaj Parkar, Commented Feb 13, 2015 at 16:40
@pankajparkar Yes, not exactly the way you told to fix it, but it's solved. Your and dirn's answers gave me an idea that worked. I edited the question so you can see how I did it — yotle
– yotle, Commented Feb 13, 2015 at 17:13

Pankaj Parkar · Accepted Answer · 2015-02-13 17:31:13Z

1

Simply use ' while DOM attribute already has started with "

Double inside double qoute will break the DOM.

<body ng-init="init('{{ bar|tojson|safe }}')" ng-controller="AppCtrl">

Will render on DOM as

<body ng-init="init('foo')" ng-controller="AppCtrl">

Hope this could help you. Thanks.

answered Feb 13, 2015 at 17:31

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Answer 1