如何在angular-js变量的函数中创建DOM？

Question

我有一个函数renderFOO(value) ，它返回一个DOM元素。 如何通过模型中的变量功能在AngularJS应用程序中呈现该元素？

我设法使用指令解决了它：

<input type="range" ng-model="foo">
<foo></foo>

app.directive("foo", function(){
    return {
        restrict: "E",
        link : function(scope, elem, attr){
            scope.$watch("foo",function(periodo){
                elem[0].innerHTML = "";
                elem[0].appendChild(renderFOO(foo));
            });
        }}
});

但是我认为这很大，可能不是惯用的，解决方案将是这样的：

<input type="range" ng-model="foo">
<div>{{renderFOO(foo)}}</div>

哪个不起作用。

Answer 1

如果我理解正确，那么您应该能够在ngSanitize模块中利用ngBindHtml-提供将DOM元素绑定到某个值的功能。 观察下面的简化示例...

<button ng-click="renderFoo()">render</button>
<div ng-bind-html="foo"></div>

---

$scope.renderFoo = function() {
    $scope.foo = '<span class="example">stuff</span>'
}

JSFiddle Link-简化的演示