javascript - 如何轻松地从 Angular js 中的字符串呈现部分 HTML？

Question

This fiddle尝试以字符串形式呈现两个部分。当然，这个解决方案是行不通的(部分是按原样呈现的，而不是解释为 Angular 模板)。

据我所知，我不得不使用 $compile 服务，但我不太明白。出于性能原因，我希望每个部分只编译一次，然后只在本地更新。 $compile 可以这样做吗？如果可以，怎么做？在我的例子中，部分内容不多，对部分内容集的更改也不多，而且每个部分内容都可能非常大(整个子页面)。

不，我不希望它们位于单独的文件中。此外， View 是延迟加载的。

是否有可能通过为每个这样的部分插入一个新模块来实现这一点？

更新:

感谢@threed ，我能够解决所有问题。 This is an improved version带有延迟加载的内容和 Controller 。

Answer 1

您可以使用 ng-include 指令(参见 this 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;
}