如何將AngularJS變量打印為Symfony2項目中的鏈接

Question

我試圖在用AngularJS獲取值的同時打印symfony2中的鏈接。 我在花括號方面遇到問題。

例如：

 <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> 

我發現如果在尖括號“ {{variable'}}”周圍加上花括號，它會起作用

像這樣

{{ '{{ variable }}' }}

但這對我來說似乎不對。 此外，該鏈接不起作用。 它被打印為％7B％7B％20tip.id％20％7D％7D，這顯然是因為大括號。

任何人？

謝謝

Answer 1

您是否嘗試過{{ '{{ variable }}' | raw }} {{ '{{ variable }}' | raw }} ？ 似乎在Twig配置中啟用了轉義。 默認情況下。

編輯 ：好的，看來實際發生的情況是瀏覽器自動“大括號”大括號。 我認為問題不在於Twig，實際上是Angular.js。 使用Angular時不應使用ng-href而應使用ng-href 。

Answer 2

您是否試圖擺脫內在的花括號？

<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>

這很丑陋，但也許可以為您提供幫助。

Answer 3

無論如何，要顯示角度的變量，請使用verbatim標記。

舉個例子：

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

現在{{ tip.title }}不會被twig解析，而是由angularjs解析。

Answer 4

您應該使用{％verbatim％}來擺脫TWIG的curly ，並為src和href使用ng- *屬性，以允許AngularJS很好地解析它，如下所示：

<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>

有關ng- *屬性的更多示例

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

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