2016-08-09 14 views
0

WiXコンポーネントを作成するためにAngular2を使用しようとしています。バインド後にAngular2カスタム属性がDOMに表示されない

私は({{'email' | translate}}に注意してください)結合できるように、角度の構文を使用して、spanにWiXのカスタム属性wix-optionsを追加しました:

<span wix-ctrl="Input" attr.wix-options="{placeholder: {{'email' | translate}}, size: 'big'}"></span> 

私はChromeでJavaScriptコードをシングルステップすると、属性が表示されません。要素の上: enter image description here

結合を可能にするattr.が付いていなかったwix-ctrl属性、引き続き表示されます。

Angular2にDOM内のwix-options属性を保持させるにはどうすればよいですか? WiX UIライブラリは、wix-ctrlというタグが付いた要素を検索し、wix-optionsを読み取り、詳細情報を取得します。あなたがいることを指示方法やってみたいことがあり

答えて

0

<span wix-ctrl="Input" [attr.wix-options]="{placeholder: {{'email' | translate}}, size: 'big'}"></span> 

をそれ以外の場合は、あなたがそれを何かしなければならないと思います:あなたがオブジェクトに渡しているので

<span wix-ctrl="Input" attr.wix-options="{{ {placeholder: {{'email' | translate}}, size: 'big'} }}"></span> 

を、角度ISNそれはすべてを解析するかどうかを意識していない。 Dev Toolsでもおそらくエラーが発生しています。

+0

私は質問でそれを述べていないのに、実際には早くそれを試しました。私は同じ結果を得た。ところで、Angularは表示されているように属性値を解析するのに問題がないようです**。私は '{{'を見つけるためにある種のパターンマッチング(regexp?)を使用していると仮定します。 – Ralph

+0

私は、物事が解析されていることと関係があるのだろうかと思います。私はWiXを使用していないので、正確に動作するかどうかはわかりませんが、カスタムDOMオブジェクトを作成するために-optionsを解析すると仮定しています。 Angularが解析/処理するための変更を行う前に、オプションを解析しようとしている可能性があります。 –

+0

私はjqueryを使って、角度結合を使わずに 'wix-options'属性を"注入 "しようとしています。それがうまくいくと、誰かがより良い投稿を投稿するまで、私はクルージの解決策として回答を投稿します。 – Ralph

関連する問題