从单个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);
}

我们创建了一个假div来为我们解析。

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