从 AngularJS 模板字符串生成 HTML 字符串答案

【问题标题】：Generate HTML string from AngularJS template string从 AngularJS 模板字符串生成 HTML 字符串
【发布时间】：2014-10-15 15:35:05
【问题描述】：

我有 angularjs 模板作为字符串，包括“ng-repeat”和其他指令。我想在控制器中编译它以生成结果 HTML 作为字符串。

我想在 Angular 中应用的示例：

Input:
-------
var template = '<div ng-repeat="item in items">{{item.data}}</div>';

Output:
--------
var result = '<div>1</div><div>2</div><div>3</div><div>4</div>';

我希望在我已经使用过的控制器中完成此操作，并尝试了以下操作：

var template = '<div ng-repeat="item in items">{{item.data}}</div>';
var linkFunction = $compile(template);
var result = linkFunction($scope);

console.log(result); // prints the template itself!

谢谢！

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

试一试：

var template = angular.element('<div ng-repeat="item in items">{{item.data}}</div>');
var linkFunction = $compile(template);
var result = linkFunction($scope);
$scope.$apply();

console.log(template.html());

【讨论】：

它抛出“错误：$apply 已经在进行中”。我正在使用 Angular 1.0.8
尝试改变“$scope.$digest();”到“$scope.$apply();” - 查看我的编辑。
在我的应用程序中它抛出：$rootScope:inprog "Action Already In Progress": $digest already in progress (using ng 1.5.5)

【解决方案2】：

为此，我在几个项目前为自己制定了指令：

angular.module('myApp')

.directive('ngHtmlCompile', ["$compile", function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.ngHtmlCompile, function (newValue, oldValue) {
                element.html(newValue);
                $compile(element.contents())(scope);
            });
        }
    }
}]);

然后例如：

<div ng-html-compile='<div ng-repeat="item in items">{{item.data}}</div>'></div>

甚至字符串也可以是动态的：

<div ng-repeat="item in items" ng-html-compile="item.template">
</div>

【讨论】：