AngularJS-Twigは二重中括弧と競合します


198

ご存知のように、角と小枝の両方に共通の制御構造があります-二重中括弧。Angularのデフォルト値を変更するにはどうすればよいですか?

Twigでそれができることは知っていますが、できないのはJSだけです。



10
口ひげの狂気に対する別の小枝固有のソリューションは、verbatimタグを使用することです。例:{% verbatim %}{{ angular_var }}{% endverbatim %}AngularJSの口ひげを保存するには:twig.sensiolabs.org/doc/tags/verbatim.html
Darragh Enright

質問の作成者ではなく、将来の読者へ:この質問への回答を探している場合は、サーバー側でテンプレートがレンダリングされないようにすることを検討してください。トラフィックのソースがGoogleであるため(JS SPAを解析できます)。
OZ_ 2015

1
@OZ_ prerender.ioなどのサービスを使用する場合、AngularJSなどに対する検索エンジンの引数はかなり冗長になります。
E. Sundin 2015

回答:


287

interpolateProviderサービスを使用して、開始および終了の補間タグを変更できます。このための便利な場所の1つは、モジュールの初期化時です。

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

https://docs.angularjs.org/api/ng/provider/$interpolateProvider


5
[[]]は使用しません。:それはこのようないくつかのバインディングに悪いかもしれない[[myObject[myArray[index]]
アンドリュー・ジョスリン

1
そうだね。入力{[{}]}するのは少し変ですが、私はDjango を使用しています。答えを更新しました。
abhaga

4
ありがとう!Jeykll / LiquidおよびAngular JSで同様の問題が発生しました。私は{[と]}を選びました。
jfroom 2013

7
3行目の}の後にセミコロンを削除する必要はありませんか?
CashIsClay 2013年

Angularのグローバルレベルでこれを行う方法はありますか?私たちのウェブサイトには、さまざまなページに多数のモジュールがあり、これを忘れないでください。
theY4Kman 2013

89

この質問は答えられているように見えますが、言及されていないよりエレガントな解決策は、次のように、中括弧を小枝中括弧の間の引用符で囲むだけです。

{{ '{{myModelName}}' }}

コンテンツに変数を使用している場合は、代わりに次のようにします。

{{ '{{' ~ yourvariable ~ '}}' }}

二重引用ではなく、一重引用を使用する必要があります。二重引用符はTwigによる文字列補間を有効にするため、特に式を使用している場合は、内容に注意する必要があります。


それでも中かっこをすべて表示したくない場合は、簡単なマクロを作成してプロセスを自動化することもできます。

{% macro curly(contents) %}
   {{ '{{' ~ contents ~ '}}' }}
{% endmacro %}

それをファイルとして保存し、テンプレートにインポートします。ng名前は短くて甘いので使っています。

{% import "forms.html" as ng %}

または、テンプレートの上部にマクロを配置して、_selfとしてインポートすることもできます(ここを参照)

{% import _self as ng %}

次に、次のように使用します。

{{ ng.curly('myModelName') }}

これは出力します:

{{myModelName}}

...そしてTwigと一緒にMtHamlを使用するユーザーのフォローアップ。MtHamlは、通常の方法でAngularJSカーリーの使用を可能にします。これは、Twigコードには{{}}の代わりに-および=を介してアクセスするためです。例えば:

プレーンHTML + AngularJS:

<tr ng-repeat="product in products">
   <td> {{ product.name }} </td>
</tr>

MtHaml + AngularJS:

%tr(ng-repeat="product in products")
   %td {{ product.name }}

MtHaml + AngularJSとMtHamlスタイルの小枝:

- set twigVariable = "somevalue"
= twigVariable
%tr(ng-repeat="product in products")
   %td {{ product.name }}

6
それはおそらく最も楽しい方法ではないかもしれませんが、互換性の問題を心配しない唯一の方法だと私は思います。イーサ修正AngularまたはTwig {{は、互換性の問題または移植性の低下を引き起こす可能性があります。
レオベノア

1
私はこれやった時にのみ提供される解決策は私のために仕事を始めた {{'{{contact.name}\}'}} 印刷され{{contact.name}}、私が望んでいたとして
ティモHuovinenを

37

DjangoとAngularJSに関する同様の質問で述べたように、デフォルトのシンボル(TwigまたはAngularJS)を変更するトリックは、これらのシンボルを使用するサードパーティソフトウェアとの非互換性を提供する可能性があります。だから私がグーグルで見つけた最高のアドバイス:https//groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundleは、レクサーデリミタの設定を提供しません。これを変更すると、共有バンドルによって提供されるテンプレート(TwigBundle自体によって提供される例外テンプレートを含む)の使用が禁止されるためです。

ただし、角型テンプレートの周りに未加工タグを使用して、すべての中括弧をエスケープする手間を省くことができます。http//twig.sensiolabs.org/doc/tags/raw.html-Christophe | ストフ

タグは逐語的に名前が変更されました


6
twigのrawフィルターとの混乱を避けるために、rawタグの名前が「verbatim」に変更されていることに注意してください。
stedekay 2014年

3
これは私の意見では最もクリーンな方法です。
kemicofaゴースト

27

あなたは、属性ベースのディレクティブは、あまりにも使用することができます<p ng-bind="yourText"></p>と同じです<p>{{yourText}}</p>


4
これは実際にはより優れたソリューションでなければなりません。
Alain Jacomet Forte

5
同様に、ATTRにそれを使用する方法<li id={{item.id}}></li>
gkiwi 2015

<p data-ng-bind="yourText"></p>HTMLを有効にするために使用するのがさらに良いでしょう
Jean-Marc Zimmer '14

24

\{{product.name}}ハンドルバーで無視され、代わりにAngularで使用される式を取得するために使用できます。


これは本当に役に立ちました
エイダン

良い解決策-予約文字をエスケープするだけで、ハンドルバーでも機能します
ダーレン

22

これはベストアンサーのコンパイルバージョンであり、逐語的ブロックの例です。

単一挿入の場合は、次を使用します。

{{ '{{model}}' }}

または、twig変数を使用する場合

{{ '{{' ~ twigVariableWitModelName ~ '}}' }}

Verbatimは、非常にエレガントで、いくつかの角度変数に対して読み取り可能です。

<table ng-table>
    {% verbatim %}
        <tr ng-repeat="user in $data">
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
        </tr>
    {% endverbatim %}
</table>

ああ、これは私にとって命の恩人でした。Filter:{{{param}}:$ select.search}内で{{param}}を使用できなかったため、ソリューションで修正しました。ありがとう
Balron

19

既存のAngular構文のテンプレートタグを変更する必要がない場合は、既存のAngularテンプレートを混乱させるような書き換えが必要になります。

次のように、角タグを付けたtwigテンプレートタグを使用できます。

{% verbatim %}{{yourName}}{% endverbatim %}

これを別の同様のスレッドの回答で見つけました:symfony2アプリケーションのAngularjs


1
@ThomasReggi OPはTwigのソリューションを求めています。Liquidでも機能する他の回答を確認してください。
Noel Llevares 2013

18

あるいは、Twigが使用する文字を変更することもできます。これはTwig_Lexerによって制御されます。

$twig = new Twig_Environment();

$lexer = new Twig_Lexer($twig, array(
    'tag_comment'   => array('[#', '#]'),
    'tag_block'     => array('[%', '%]'),
    'tag_variable'  => array('[[', ']]'),
    'interpolation' => array('#[', ']'),
));
$twig->setLexer($lexer);

非常に役立ちます。ありがとう。
Anos K. Mhazo 2017

17

この投稿によると次のようにできるはずです。

angular.module('app', [])
  .config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  }]);

2
これらのコードはどこに置くべきですか?| ああ!わかった、ng-app = app
zx1986

AngularJSから始めて、Laravel 4内でフレームワークをロードしてから、ビューに{{2 + 2}}を追加しました-他には何もありませんでした。評価は4になりました。これを[[2+ 2]]?同じページのスクリプトタグの間に追加して、ng-app = "myApp"を含むdivタグに追加しようとしましたが、機能しません。
Perkin5 2013

JavaScriptに配置する必要があります。同じ場所のコントローラーが定義されています。実際の例については、script.jsタブのドキュメント(docs.angularjs.org/api/ng.$interpolateProvider)をご覧ください。
Olivier.Roger 2013

2
注意してください、私はAngularに二重角括弧を使用していましたが、Djangoメッセージフレームワークで問題が発生しました。メッセージは[[]]を含むCookieを作成し、Angularはそれを解析しようとして、プロセスを窒息させます。メッセージのセッションストレージに切り替えてみましたが、同じ問題が発生しました。三重角括弧に切り替えました。
ダスティン

2

私は@pabloRNが好きですが、pではなく結果を追加するため、pではなくspanを使用したいと思います。

私はこれを使います:

<span ng-bind="yourName"></span>

また、二重引用符内にカーソルを置いてaTextを使用しているため、全体を何度も書き換える必要はありません。


実際にはng-bind = ""が重要です。好きなタグを使用できます:)
wesamly

@wesamly任意のタグを使用でき<span>ますが、他のコンテンツがある場合のインラインテキストに使用されます。例:<h1>Welcome <span ng-bind="yourName"></span></h1>
rybo111 2016

1

twigで関数を作成して、角度ディレクティブを囲むことができます。

{{"angular"}}

あなたが行く ...

{{angular_parser("angular stuff here output curlies around it")}}


回答のコードスニペットについては、ユーザーコードブロックを入力してください。
β.εηοιτ.βε
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.