Javascript Angularjs指令，使用不同的模板方法避免{{}解析问题

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

让QA团队感到不安的是，在定制数据返回之前，他们看到404请求/{{fontPath}}/{{{customFont}}}，直到所有摘要周期结束

我一直在努力使404消失，并遇到了一些困扰我的事情

首先，事情是这样的

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

这在一开始不起作用，但在我删除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"

“\r\n”+
“@font-face{font-family:'FontOverride'；src:url（{{fontPath}}{{{customFont}}}）格式（'woff'）；字体大小：正常；字体样式：正常；}\r\n\r\n”+
...
.ourApp*：非（.fa）{\r\n字体系列：“FontOverride”！重要；\r\n}\r\n\r\n

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

这在我尝试的浏览器中都不起作用。当我检查元素时，Chrome，IE，Edge都以相同的方式呈现，但在任何阶段都没有提取或应用字体。Firefox似乎一开始就从文字中剥离了新行

所以。。。 1） 为什么模板：``在没有生成404请求的情况下工作

2） 我试图使用ECMA6模板文本来获取多行常量；我没想到模板构造会直接工作，因为ECMA6使用${}而不是{{}，但也许EMCA6模板文本也会使用角度语法？或者angular是在使用jquery语法，并使之成为同义词

3） 为什么在大多数浏览器中，带有\r\n的笨重的旧字符串文字会以相同的方式呈现，但不会产生功能影响？有点回到ECMA6模板文本是通过角度以另一种方式计算的理论

我很欣赏你的见解

---

Thx.

一种方法是在模板内声明一个带有id属性的空样式标记，例如：

<style id="app-custom-font-css"></style>

然后，当字体已上载到其最终位置并获得数据时，使用它来构建CSS内容：

// Update <style> tag with specific ID
const styleTag = document.getElementById('app-custom-font-css');
styleTag.innerHTML = myCustomCssContentString;

//使用特定ID更新标记
const styleTag=document.getElementById（'app-custom-font-css'）；
styleTag.innerHTML=myCustomCssContentString；

上述操作可以通过指令完成，也可以在应用程序加载后完成。希望有帮助。

在页面中实例化Angular之前，任何

标记都将通过浏览器进行解析（并加载

src

）。这意味着如果应用了

，则在
ng之前

您需要存储该标记，而不允许浏览器将其解析为
标记

对于这种情况，一个典型的解决方案是将其包装在

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


...

这是动态模板的常见模式。加载组件时，按id选择脚本，获取其
.html（）
，
$compile
并追加

出于某种原因，我无法让它工作[所以]，但你可以看到它在这把小提琴中工作：

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

并应用字体。
感谢您的回复。标记当前位于angular模板中，而不是页面本身，因此angular的某些部分必须在到达该模板之前完成。我只是不清楚为什么让一个指令从模板（相对于ECMA6模板文本）中拉入它会在获取未解释的表达式时打开一个缺口。然后在解析表达式后再次获取。我不清楚为什么模板文字可以工作，但是手工制作的多行字符串不能。这些是问题的关键。如果应用了
ng，则请求在
ng之前离开，这一事实告诉我们，浏览器在编译标记之前会看到该标记。试试我的建议。它应该会起作用。我将尝试添加一个通用示例。“如果你有一把小提琴，我可以用它，特别是如果它有问题的话。”用户，添加了一把小提琴。我不知道为什么要阻止它，当我在这里的一个片段中尝试同样的方法时，但是你可以看到它在小提琴中正常工作。我最终做了类似的事情。我将模板设置为空，在指令链接中设置了一个watch来填充模板，并在设置时设置$compile。仍然不知道为什么模板文本在没有$compile或其他问题的情况下工作，但仍然很高兴能够解决它。感谢您的回复。我可能会走这样一条路，但我想先了解angular消化道的一些事情，比如为什么模板文字在不生成404请求的情况下工作，而通过templateUrl将其拉入会打开生成404的缺口。以及为什么多行常量（不是模板文本）即使呈现相同（在大多数浏览器中）也不会产生函数结果
// Update <style> tag with specific ID
const styleTag = document.getElementById('app-custom-font-css');
styleTag.innerHTML = myCustomCssContentString;

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