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

しかし、これは私にとっては正しいようです。 また、リンクが機能しません。 中括弧のため明白な％7B％7B％20tip.id％20％7D％7Dとして印刷されます。

誰でも？

おかげ

Answer 1

あなたは{{ '{{ variable }}' | raw }}を試してみましたか？ Twigの設定でエスケープがオンになっているようです。これはデフォルトです。

EDIT：実際には、ブラウザーが中括弧を自動的に「urlencoding」しているようです。問題はTwigではなく、Angular.jsであると私は思う。 Angularを使用するときは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タグを使用します。 exempleについては

：今

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

{{ tip.title }}は小枝ではなくangularjsによって解析されません。

Answer 4

あなたは、TWIGからカーリーを逃れるためにを{％逐語％}を使用して、このように、AngularJSはうまくそれを解析することを可能にするために、srcとhrefのためng- *属性を使用する必要があります。

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

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

属性ng- *についてのより多くの例3210