javascript - Angularjs 指令，不同的模板处理方式以避免 {{}} 解析问题

Question

我们有一个 Angular 应用程序，最近我们添加了一种机制，可以选择允许用户上传自定义字体，然后以该自定义字体呈现应用程序。实现它的人投入了一个指令，该指令声明一个 block 并根据用户在页面上的自定义定义字体覆盖。

对 QA 团队进行调整的是，在自定义数据返回之前，他们会看到对/{{fontPath}}/{{customFont}} 的 404 请求，直到所有摘要周期都完成。

我一直在努力让 404 消失，但遇到了一些让我困惑的事情。

首先，这是事情的样子

<div font-override ng-if="customFont"></div>

指令 templateUrl 看起来像

<style>
    @font-face {
        font-family: 'FontOverride';
        src: url("{{fontPath}}{{customFont}}") format('woff');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'FontOverride';
        src: url("{{fontPath}}{{customFont_bold}}") format('woff');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'FontOverride';
        src: url("{{fontPath}}{{customFont_italic}}") format('woff');
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: 'FontOverride';
        src: url("{{fontPath}}{{customFont_boldItalic}}") format('woff');
        font-weight: bold;
        font-style: italic;
    }

    .ourApp *:not(.fa) {
        font-family: 'FontOverride' !important;
    }
</style>

当 templateUrl 内容被换入时，会立即出现 404 请求“/{{fontPath}}{{customFont}}”

我一直在玩弄一堆东西试图让它消失。我将 ng-cloak 放在 div 和 templateUrl 内容中。它没有用。

我尝试定义 ng-cloak 样式并将其设置为样式节点上的 css 类(在另一篇 stack oflow 文章中找到)但它没有用。

在野兔上，我尝试获取 templateUrl 文件的内容并使用模板文字将其嵌入到指令代码中

template: ``

起初没有用，但在我删除 url("{{fontPath}}{{customFont}}") 周围的引号后开始起作用。

不清楚模板为什么、如何或在什么时候得到解决，或者为什么它比 templateUrl 更有效(关于 404)。我的意思是，根据我对 ECMA6 的了解，实际的模板位是 ${}，而不是 {{}}。

然后我在 IE11 中尝试了它(因为我们仍然名义上支持它)，当然模板文字在那里不起作用。所以我尝试将多行内容构建为旧字符串

"<style>\r\n" +
"    @font-face { font-family: 'FontOverride'; src: url('{{fontPath}}{{customFont}}') format('woff'); font-weight: normal; font-style: normal; } \r\n\r\n" +
...
"    .ourApp *: not(.fa) {\r\n         font-family: 'FontOverride' !important;\r\n }\r\n</style>\r\n"

样式的最后一行似乎对换行符/空格更敏感，所以我试图保留它。

这在我试过的任何浏览器中都有效。当我检查元素时，Chrome、IE、Edge 都以相同的方式呈现它，但在任何阶段都没有获取或应用字体。 Firefox 似乎首先从文字中剥离了换行符。

所以... 1) 为什么 template: `` 在一开始就没有产生 404 请求的情况下工作？

2) 我试图使用 ECMA6 模板文字来获取多行常量；我没想到模板构造可以直接工作，因为 ECMA6 使用 ${} 而不是 {{}}，但也许 EMCA6 模板文字也有 Angular 语法？或者也许 Angular 正在插入 jquery 语法并制作某种同义词？

3) 为什么带有\r\n 的笨重旧字符串文字在大多数浏览器中呈现相同但不产生功能影响？有点循环回到 ECMA6 模板文字正在以不同方式通过 Angular 进行评估的理论。

欣赏见解。

谢谢。

Answer 1

任何<style>在页面中实例化 Angular 之前，浏览器将解析标签(并加载 src 的标签)。这意味着在 ng-if 之前已应用。

您需要在不允许浏览器将其解析为 <style> 的情况下存储该标记。标签。

这种情况的典型解决方案是将其包装在

<script type="text/template">
  <style>...</style>
</script>

这是动态模板的常见模式。当你的组件加载时，通过 id 选择脚本，获取它的 .html() , $compile并追加。

出于某种原因，我无法让它在 [SO] 上工作，但你可以在这个 fiddle 中看到它工作:https://jsfiddle.net/websiter/khjr70ep/

我没有你的文件，所以我使用了一些随机的谷歌字体，但你可以看到它在解析之前没有加载。

它应用字体。