script 标签在作者模式下破坏了 data-sly 标签

Question

我用的是 angular sightly。所以我有 angular html 模板被脚本标签包围，它也有像 data-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

在您的脚本标签中，您可以添加 data-sly-unwrap="${wcmmode.edit}"

这将在编辑模式下删除脚本标签，允许您编辑包含的组件，但在任何其他模式下，脚本标签都会呈现。

Answer 2

我最终重复了代码，一个用于作者模式，另一个用于非编辑模式。

下面与我的解决方案非常相似。

    <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}".

显示什么以及何时显示

我还尝试为冗余代码创建 sightly 模板，而不是尝试 data-sly-use 但是现在，它可以在作者模式下工作，但即使我使用了 sightly 也无法将模板放入 <script> 标签中@ context='unsafe'

Answer 3

我在 Netcentric 的 AEM Sightly Style Guide 中发现了以下内容：

Then, because the HTML grammar ignores elements located inside a < script > or < style > elements, no block statement can be used within them.

虽然Sightly spec中没有明确说明，但也有道理。所以你的修复是正确的。

Answer 4

有一个基于 Sightly Reference

的解决方法

将标记放在单独的 html 文件中，比如 mymarkup.html 与 mycomponent.html
在组件 HTML 文件中（例如 mycomponent.html）使用 <script type="text/ng-template" data-sly-include="mymarkup.html"></script>

在 mymarkup.html 中，我们可以正常使用 Sightly 标签，这些标签通常是 evaluated/executed，我们甚至不需要为使用 [= 读取的变量指定 @ context 32=]。拖到页面时由组件 mycomponent.html 呈现的最终标记将呈现如下所示的内容

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

script 标签在作者模式下破坏了 data-sly 标签

script tag breaks sightly data-sly tag in author mode

templates

angularjs

aem

sightly