如何在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-簡化的演示