スクリプトタグは著者モードで目立つdata-slyタグを壊します

Question

私は目障りに角度を使用しています。だから、私はスクリプトタグで囲まれた角度のあるHTMLテンプレートを持っています。それはまた、データsly-resourceのような目立つ属性も持っています。 以下のコード例は、あなたに明確なアイデアを与えます。

<script type="text/ng-template" id="example.html"> 
    <section data-sly-resource="${ @path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" > 
     <div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div> 
    </section> 
</script> 

非編集モードでは正常に動作しますが、編集モードではdata-sly-resource部分を作成できません。 <script>というタグは、<script>というタグを削除すると、私はそれを作成することができるので、それがうまく動作しないように見えます。

スクリプトタグを削除することもオプションではありません。

これで、スクリプトタグのフォームが表示モードで機能しなくなるのを防ぐにはどうすればよいですか？スクリプトタグで

Answer 1

著者モードと非編集モードのコードの繰り返しが終わりました。

以下は私のソリューションによく似ています。

<section data-sly-resource="${ @path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" > 
     <div ng-include="'private/textOverImage.html'"></div> 
    </section> 

    <script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}"> 
     <section data-sly-resource="${ @path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" > 
     <div ng-include="'private/textOverImage.html'"></div> 
     </section> 
    </script> 

上記のコードに示されているように、表示される内容と時はdata-sly-test="${wcmmode.edit}"で動作します。

は私も data-sly-useを試みるよりも、冗長なコードのための見た目のテンプレートを作成してすることを試みたが、今、それは私が私が見つけた @ context='unsafe'

Answer 2

あなたはdata-sly-unwrap="${wcmmode.edit}"

は、このあなたが含まれるコンポーネントを編集できるように編集モードでスクリプトタグを削除します追加できますが、他のモードでのスクリプトタグがレンダリングされます。

Answer 3

使用していても<script>タグ内にテンプレートを置くことができない見た目作成者モードで動作しますが、以下のネット中心のAEM Sightly Style Guideに言及：

次に、HTMLの文法が <スクリプト>または<スタイル>要素内に位置する要素を無視し、何のブロック文が 内で使用することはできないので、 m。

具体的にはSightly specに記載されていませんが、意味があります。だからあなたの修正は正しい。

Answer 4

Sightly Reference

1. に基づいて問題を回避するには、別のHTMLファイル内のマークアップをそこに置かれ、コンポーネントHTMLファイルでmycomponent.html
2. からmymarkup.htmlパラレル（例えばmycomponent.html）が<script type="text/ng-template" data-sly-include="mymarkup.html"></script>

を使用すると言いますmymarkup.htmlでは、Sightlyタグを通常使うことができ、通常は評価/実行されるので、@ context fを指定する必要はありませんまたはuse APIを使用して読み込む変数です。コンポーネントmycomponent.htmlによってレンダリングされた最終的なマークアップは、次のようにレンダリングされます。

<script type="text/ng-template"> 
    //mymarkup.html evaluated content here 
</script>