How do I create a DOM in function of an angular-js variable?

Question

I have a function, renderFOO(value), that returns a DOM element. How can I have that element rendered inside an AngularJS application, in function of a variable in a model?

I've managed to solve it using a directive:

<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));
            });
        }}
});

But I think that is big and probably not idiomatic and the solution would be something like:

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

Which does not work.

Where is the renderFOO function? I mean is it scoped? Is it from another library? — michelem
– michelem, Commented Nov 6, 2015 at 17:12
what are you trying to do? mostley its not a very good idea to manipulate the DOM directly when using AngularJS — messerbill
– messerbill, Commented Nov 6, 2015 at 17:13
I'm rendering an SVG chart dynamically, so I created the renderFOO function which returns the chart as I need it. — MaiaVictor
– MaiaVictor, Commented Nov 6, 2015 at 17:24
@Viclib were you able to make any progress on this? Was my suggestion able to help you? — scniro
– scniro, Commented Nov 9, 2015 at 15:18
@scniro I've ran out of time for this issue for now, so I left it in a non optimal way. I will come back to this problem eventually, test your suggestion and give you a feedback. Thank you! — MaiaVictor
– MaiaVictor, Commented Nov 9, 2015 at 16:17

scniro · Accepted Answer · 2015-11-06 19:07:26Z

1

If I understand correctly, you should be able to leverage ngBindHtml in the ngSanitize module - offering the ability to bind DOM elements to some value. Observe the following simplified example...

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

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

JSFiddle Link - simplified demo

edited Nov 6, 2015 at 19:07

answered Nov 6, 2015 at 18:53

scniro

17k8 gold badges67 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I create a DOM in function of an angular-js variable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related