javascript - 恢复保存的 Angular HTML

Question

在我的应用程序中，我有时会通过 $(element).contents() 保存一个非常大的 HTML block 的状态(我可以使用 $(element) .html()(如果需要)。如果该 block 内部包含复杂的指令信息，如何将该 block 转换回 Angular ？重点是避免重建 ng-repeats。但如果不编译它，我就会失去其中的 Angular 主义的所有功能。下面是 HTML 字符串的一个小示例:

<div ng-controller='fruits'>
    <div class="dtable">
        <!-- ngRepeat: fruit in fruitCollection track by fruit.id -->
        <div ng-repeat="fruit in fruitCollection track by fruit.id" class="ng-scope drow selected" ng-class="fruit.selected && 'selected'">
            <div class="idx ng-scope dinline">1</div>
            <div class="name ng-scope dinline hilight">Apple</div>
            <div class="info ng-scope dinline">Red</div>
        </div>
        <!-- end ngRepeat: fruit in fruitCollection track by fruit.id -->
        <!-- ngRepeat: fruit in fruitCollection track by fruit.id -->
        <div ng-repeat="fruit in fruitCollection track by fruit.id" class="ng-scope drow" ng-class="fruit.selected && 'selected'">
            <div class="idx ng-scope dinline">2</div>
            <div class="name ng-scope dinline">Orange</div>
            <div class="info ng-scope dinline">Orange</div>
        </div>
        <!-- end ngRepeat: fruit in fruitCollection track by fruit.id -->
    </div>
    <h3>Filters</h3>
    <div class="controls dtablev">
    <!-- ngRepeat: filter in filterCollection -->
        <div class="ng-scope checked" ng-click="toggleSelection(filter)" ng-class="filter.checked && 'checked'">Red</div>
    <!-- end ngRepeat: filter in filterCollection -->
    <!-- ngRepeat: filter in filterCollection -->
        <div class="ng-scope" ng-click="toggleSelection(filter)" ng-class="filter.checked && 'checked'">Orange</div>
    <!-- end ngRepeat: filter in filterCollection -->
    </div>
</div>

简单地重新插入 HTML 看起来很棒，但您无法单击任何内容。我希望 $compile 有一些小 secret 可以处理这个问题。

Answer 1

将 HTML 添加回页面后，您应该使用 $compile根元素上的服务。

$compile(element)($scope);