web-dev-qa-db-ja.com

AngularJS-Twigと二重中括弧との競合

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

Twigでできることは知っていますが、できないプロジェクトはありますが、JSだけです。

angularjstwig
196
Meliborn

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

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

http://docs.angularjs.org/api/ng.$interpolateProvider

285
abhaga

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

{{ '{{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は、すべてのTwigコードにアクセスするため、通常の方法でAngularJSカーリーの使用を有効にします。ただし、{{}}ではなく=です。例えば：

プレーン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スタイルのTwigを使用したMtHaml + AngularJS：

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

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

TwigBundleでは、レクサーの区切り文字を変更すると、共有バンドルで提供されるテンプレート（TwigBundle自体で提供される例外テンプレートを含む）の使用が禁止されるため、構成は提供されません。

ただし、angularテンプレートの周りに生タグを使用して、すべての中括弧をエスケープする苦痛を避けることができます。 http://twig.sensiolabs.org/doc/tags/raw.html -クリストフ|ストフ

タグの名前が verbatim に変更されました

35
OZ_

属性ベースのディレクティブ<p ng-bind="yourText"></p>も<p>{{yourText}}</p>と同じです。

27
pabloRN

\{{product.name}}を使用して、Handlebarsによって無視され、代わりにAngularによって使用される式を取得できます。

23
Nacho Coloma

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

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

{{ '{{model}}' }}

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

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

Verbatim 、いくつかのangular変数に対して非常にエレガントで読みやすい：

<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>
19
Guilherme Viebig

既存のangularシンタックスのテンプレートタグを変更することに興味がない場合は、既存のangularテンプレートのややこしい書き換えが必要になります。

twigテンプレートタグとangularタグを次のように使用できます。

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

他の同様のスレッドでこれを見つけました answer ： symfony2アプリケーションのAngularjs

18
chrisjlee

または、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);
17
Jasny - Arnold Daniels

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

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

私は@pabloRNが好きですが、私はpが結果に行を追加するので、pの代わりにspanを使用することを好みます。

私はこれを使用します：

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

また、二重引用符内のカーソルでaTextを使用するので、全体を何度も書き換える必要はありません。

2
sifoo

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

{{"angular"}}

あなたが行く ...

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

0
marcinzajkowski