如何将AngularJS变量打印为Symfony2项目中的链接

Question

I'm trying to print out a link in symfony2 while fetching the values with AngularJS. I am having problems with the curly brackets.

for example:

 <div id="columns"> <div class="block" ng-repeat = "tip in tips"> <img src="{{' {{ tip.imageDocument.webPath }}'}}" alt=""> <div class="detail"> <h2>{{ '{{ tip.title }}' }} {{ '{{ tip.id }}' }}</h2> <p>{{ '{{ tip.introduction }}'}}</p> <a href="./tips/{{'{{ tip.id }}'}}" class="button">{% trans %}Read more{% endtrans %}</a> </div> </div> </div> 

I figured that it works if I put curly brackets with around the angular variable '{{ variable '}}'

like this

{{ '{{ variable }}' }}

But this doesnt seem right to me. Also the link doesnt work. It gets printed out as %7B%7B%20tip.id%20%7D%7D which is obvious because of the curly brackets..

Anyone?

Thanks

Answer 1

Did you try {{ '{{ variable }}' | raw }} {{ '{{ variable }}' | raw }} ? It looks like escaping is turned on in your Twig configuration. It is by default.

EDIT : Ok, it looks like what is actually going on is that the browser is automatically "urlencoding" the curly brackets. I think the issue is not with Twig, in fact it is with Angular.js. You shouldn't use href when using Angular, you should use ng-href instead.

Answer 2

Have you tried to escape your inner curly brackets ?

<div id="columns">

  <div class="block" ng-repeat = "tip in tips">

    <img src="{{' \{\{ tip.imageDocument.webPath \}\}'}}" alt="">

    <div class="detail">
      <h2>{{ '\{\{ tip.title \}\}' }}  {{ '\{\{ tip.id \}\}' }}</h2>

      <p>{{ '\{\{ tip.introduction \}\}'}}</p>
      <a href="./tips/{{'\{\{ tip.id \}\}'}}" class="button">{% trans %}Read more{% endtrans %}</a>
    </div>


  </div>

</div>

That's ugly but maybe this can help you.

Answer 3

Use verbatim tag anyway you want to display angular's variable.

For exemple:

{% verbatim %} {{ tip.title }}{% endverbatim %} 

Now {{ tip.title }} will not parsed by twig but by angularjs.

Answer 4

You should use {% verbatim %} to escape curlies from TWIG, and use ng-* attributes for src and href to allow AngularJS to parse it well, like this:

<div id="columns">
  <div class="block" ng-repeat="tip in tips">
    <img ng-src="{% verbatim %}{{ tip.imageDocument.webPath }}{% endverbatim %}" alt="">

    <div class="detail">
      <h2>{% verbatim %}{{ tip.title + ' ' + tip.id }}{% endverbatim %}</h2>

      <p>{% verbatim %}{{ tip.introduction }}{% endverbatim %}</p>

      <a ng-href="./tips/{% verbatim %}{{ tip.id }}{% endverbatim %}" class="button">
        {% trans %}Read more{% endtrans %}
      </a>
    </div>
  </div>
</div>

More examples about ng-* attributes

https://docs.angularjs.org/api/ng/directive/ngSrc

https://docs.angularjs.org/api/ng/directive/ngHref