Javascript 是否可以将角度模板编译成最终的html字符串？

是否可以编译此html模板字符串：

"<p>List of products from {{supplier.name}}</p>
<p ng-repeat="ref in refs">{{ref}}</p>"

有没有办法直接从模板中获取最终的html？ 谢谢

附言： 我在这里试图实现的是直接在CKEditor中编辑模板（在文本模式下，而不是源代码模式下） 最终只会转到源模式添加一些“ng repeat”属性。 使用诸如Handlebar之类的模板引擎需要html元素之外的占位符，并且由于它只处理html，所以CKEditor会自动删除占位符

可能的解决方案（黑客）： 一种可能的方法是对隐藏元素使用compile指令，并在控制器上加载视图后读取元素的内容：

cleanAngularStuff函数只是用来清理额外的角度指令和类

如果有人想使用它或改进它，我会发布它

---

在不向页面添加元素的情况下，有什么更好的方法可以做到这一点吗？

可以通过向您的指令提供模板来完成，如下所示

app.directive('compile', function($compile) {
return{
    restrict: 'A',
    template: '<p>List of products from {{supplier.name}}</p>
               <p ng-repeat="ref in refs">{{ref}}</p>'
    scope: {
     refs: '='
     supplier: '='
    },
    link: function(scope, element, attrs) {
       # Your code goes here 
    }
}

app.directive（'compile'，function（$compile）{
返回{
限制：“A”，
模板：'来自{{supplier.name}的产品列表

{{ref}
'
范围：{
参考文献：'='
供应商：'='
},
链接：函数（范围、元素、属性）{
#你的密码在这里
}
}

---

})

您需要做的是在$digest循环之后访问已编译的元素

因此，在$digest周期内，您可以执行以下操作：

templateString = '<some-template-code/>';
...
var compiled = $compile(templateString)(scope);
// scope.$digest // only call this if not within a $digest cycle

// you can do a $timeout to let the previous digest cycle complete
$timeout(function(){
  var theHtml = compiled[0].outerHTML;
  console.log('the html with the variables', theHtml);
});

.form字段{
垫底：10px；
}
.表单字段范围{
宽度：70px；
显示：内联块；
}
.已编译模板{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
}
.已编译模板文本区域{
背景色：#eee；
右边距：10px；
}
.compiled template.output{
边框：1px实心#ccc；
填充：10px；
}

姓名：


模板：

我尝试过，但我想使用ckeditor（或类似工具）编辑模板，这些编辑器只允许html元素。元素标记外的Addind{{{#each ref}}自动erased@RuiFortes这取决于你什么时候需要编译的内容。你想通过angular的html输出实现什么？只是在原始帖子中添加了一些解释。我真的不明白为什么你要绑定到你的作用域上的

“compile”

。。。控制器的作用域上是否有编译对象？控制器中的

$scope.data

是什么样子的？我想多加一些上下文会有帮助。@tennisgent compile是一个指令。请看，我只是将其更改为使用隔离作用域。我还使用了一些黑客策略将“数据”对象属性提取到作用域根，这样我就不必在所有模板占位符前面加前缀。这应该标记为正确答案。我在使用$compile转换带有角度表达式的HTML字符串时遇到了一些问题，对其进行编译，然后将其转换回填充有数据的HTML字符串。在使用$timeout之前，角括号{{}仍然出现，这就解决了它！谢谢

app.directive('compile', function($compile) {
    return{
        restrict: 'A',
        scope: {
            compile: '=compile',
            data: '=ngData'
        },
        link: function(scope, element, attrs) {
            scope.$watch('data',
                    function(value) {
                        for (var k in scope.data)
                            scope[k] = scope.data[k];
                    }
            )

            scope.$watch('compile',
                    function(value) {
                        element.html(value);
                        var a = $compile(element.contents())(scope);
                    }
            )
        }
    }
})

$scope.$on('$viewContentLoaded', $scope.onLoaded);
$timeout(function() {
    var el =$("#text div")[0]
    cleanAngularStuff(el)
    $scope.currMailTemplate.processed = el.innerHTML
});

app.directive('compile', function($compile) {
return{
    restrict: 'A',
    template: '<p>List of products from {{supplier.name}}</p>
               <p ng-repeat="ref in refs">{{ref}}</p>'
    scope: {
     refs: '='
     supplier: '='
    },
    link: function(scope, element, attrs) {
       # Your code goes here 
    }
}

templateString = '<some-template-code/>';
...
var compiled = $compile(templateString)(scope);
// scope.$digest // only call this if not within a $digest cycle

// you can do a $timeout to let the previous digest cycle complete
$timeout(function(){
  var theHtml = compiled[0].outerHTML;
  console.log('the html with the variables', theHtml);
});