如何從Angular JS中的字符串輕松呈現部分HTML？

Question

這個小提琴試圖以字符串形式呈現兩個部分。 當然，此解決方案將不起作用（局部顯示為原樣，並且不解釋為角度模板）。

據我了解，我不得不以某種方式使用$compile服務，但我不太了解。 出於性能原因，我希望每個部分僅編譯一次，然后僅在本地更新。 $compile做到嗎，如果可以，怎么做？ 在我的情況下，分頁不多，對分頁集的更改也不多，每個分頁都可以很大（整個子頁面）。

不，我不希望它們位於單獨的文件中。 此外，視圖是延遲加載的。

是否有可能通過為每個這樣的部分插入一個新模塊來實現這一目標？

更新：

感謝@threed ，我得以將其全部修復。 這是具有延遲加載的內容和控制器的改進版本 。

Answer 1

您可以使用ng-include指令（請參閱此 jsfiddle）...

HTML：

<div ng-app="app" ng-controller="MyCtrl">
    <div ng-repeat="partial in partials">
        <div ng-include="partial.name"></div>
   </div>
</div>

JavaScript的：

var app = angular.module('app', []);
var data = [
    'data1-apple',
    'data2-banana'
];
var partials = [
    {
        name: 'template1',
        content: '<div>{{data[0]}}</div>'
    },
    {
        name: 'template2',
        content: '<div>{{data[1]}}</div>'
    }
];
function MyCtrl($scope, $templateCache) {
    for(var i in partials){
        $templateCache.put(partials[i].name, partials[i].content);
    }
    $scope.partials = partials;
    $scope.data = data;
}