Question

是否有可能获得没有dom的编译角度指令html代码？

这就是我想要的：

var scope = {
        list: ["Peter","Paul","Mary"]
    },
    template = '<ul><li ng-repeat="item in list"{{item}}</li><ul>',
    result;

result = desiredFunction( scope, template );

// result should be: "<ul><li>Peter</li><li>Paul</li><li>Mary</li></ul>"

是否有可能获得desiredFunction？

修改

让我的愿望更清楚：我想＆＃34;编译＆＃34;一个角度指令模板字符串，而不必将指令推入dom ，因为我不希望它在dom中。我甚至不想要指令。我只想要的是来自模板字符串的编译字符串（template-string + scope-object ==＆gt; html-string）。

是否有任何Angular-internal或甚至外部（库）方法？

编辑（2）：

采用NewDev的答案，更正我的html模板并添加$timeout会引导我使用以下解决方案：

    $scope.list = ["Peter", "Paul", "Mary"];
    var template = '<ul><li ng-repeat="item in list">{{item}}</li></ul>';
    var jqElem = angular.element(template);
    $compile(jqElem)($scope);
    $timeout( function() {
        console.log( jqElem.html() );
    });

编辑（3）：

遵循zerflagL的评论，这也是可能的（甚至更短）：

    $scope.list = ["Peter", "Paul", "Mary"];
    var template = '<ul><li ng-repeat="item in list">{{item}}</li></ul>';
    var result = $compile(template)($scope)[0];
    $timeout( function() {
        console.log( result );
    });

Answer 1

您可以在不使用DOM的元素的情况下进行编译。

假设你有适当的注射，你可以这样做：

var template = '<ul><li ng-repeat="item in list"{{item}}</li><ul>';
var jqElem = angular.element("<div>").html(template);
$compile(jqElem)($scope);

但是，此时innerHTML仍未编译。为此，我们需要等到$ digest循环结束。我知道如何做到这一点的一种方法是使用$ timeout，但这意味着你的函数必须返回一个promise

return $timeout(function(){ return jqElem.html(); }, 0);

P.S。

您可以将模板直接传递到$compile函数，但请注意.html()将返回内部HTML，因此您可能需要执行以下操作来获取完整模板：

return $timeout(function(){ return jqElem[0].outerHTML; }, 0);

Answer 2

如果不需要指令解释：使用$interpolate。则不需要$compile和$scope。相关：Compile a template without passing scope

var html = '<div> {{item}} </div>' // or $templateCache.get('myTemplate.html') too
var vars = { item: 'John' };
var result = $interpolate(html)(vars);
// result = '<div> John </div>'

编译角度指令模板，不带dom

2 个答案: