javascript - 从单个 HTML *字符串* 注册多个部分

Question

想象一下，我有一个包含多个 HTML 部分的字符串，如下所示:

<script type="text/ng-template" id="ratings/down">
    <i class="fa fa-thumbs-o-down"
        style="position: absolute; color: red; font-size: 2em; left: .6em; top: .3em;"></i>
</script>

<script type="text/ng-template" id="ratings/up">
    <i class="fa fa-thumbs-o-up"
        style="position: absolute; color: #77AA33; font-size: 2em; left: .6em; top: .3em;"></i>
</script>

请注意，这当前不是 DOM 的一部分。它位于字符串变量中。我可以以某种方式轻松地将所有部分注册到 the $templateCache service ，并且没有自定义字符串操作？想象一下 HTML 字符串要复杂得多，就完全放弃字符串操作的想法。我希望有一种更简单的方法可以做到这一点？我感觉我不会摆弄 $compile...

Answer 1

这是一个工作 DEMO :

var string = '<script type="text/ng-template" id="ratings/down"> \
    <i class="fa fa-thumbs-o-down" \
        style="color: red; font-size: 2em; left: .6em; top: .3em;">rating down</i> \
    </script> \
 \
    <script type="text/ng-template" id="ratings/up"> \
    <i class="fa fa-thumbs-o-up" \
        style="position: absolute; color: #77AA33; font-size: 2em; left: .6em; top: .3em;"></i> \
    </script>'

var div = document.createElement('div');

div.innerHTML = string;

for (var i = 0; i < div.children.length; i++){
    var temp = div.children[i];
    $templateCache.put(temp.id, temp.innerHTML);
}

我们创建一个假 di​​v 来为我们进行解析。

备注:此逻辑应放在单独的服务中。