Flask + AngularJS - 使用url_for（）

Question

I am using AngularJS + Flask in my application, and I want to know the best way to "produce" an url, and don't write any hard code url for this. I have this situation:

*considering that I'm using [[ ]] instead of {{ }} for AngularJS.

<dd ng-repeat="item in myList">
    <span ng-click="doAction('{{ url_for('my_url', id="[[item.id]]") }}')">
      [[item.name]]
    </span>
</dd>

This is not going to work, because Jinja2 do the process url_for() before AngularJS, so "[[item.id]]" will not be substituted by AngularJS in time.

The problem is, I don't want to write in hard code like this:

<span ng-click="doAction('/my_url/[[item.id]]')">
    [[item.name]]
</span>

I am pretty new in AngularJS, maybe all my approach is wrong, so, does anyone have any idea what is the best way to make an element be clicked, make a request with an URL based on the context of the clicked element?

Answer 1

I just ran across this problem. I ended up using Jinja2's {% set ... %} .

This is how I solved it, adapted for your example.

<dd ng-repeat="item in myList">
    {% set url = url_for('my_url', id="[[item.id]]") %}

    <span ng-click="doAction('{{ url }}')">
        [[item.name]]
    </span>
</dd>

Answer 2

In my case, I was trying to dynamically create urls

I solved my issue as follows (Note: I've swapped out Angular's syntax to {[x]}:

<ul>
    <li ng-repeat="x in projects">
        {[x.title]}
        {% set url = url_for('static',filename="img/") %}

        <img src="{{url}}{[x.img]}">
    </li>
</ul>