恢復已保存的Angular HTML

Question

在我的應用程序中，我通過$(element).contents()（如果需要，我可以使用$(element).html()）來保存非常大的HTML塊。如果該塊中包含複雜的指令信息，該如何將該塊轉換回角度？關鍵是避免重建ng-repeats。但是如果沒有編譯它，我會失去內部角色的所有功能。下面是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有一些小祕密。

Answer 1

將HTML重新添加到頁面後，應在根元素上使用$compile服務。

$compile(element)($scope);