I'm relatively new to Angular and am having difficulty getting my directive output to render as HTML (vice a literal string).
Directive in HTML: <div odometer-display="{{bigNumber}}"></div>
The Directive:
app.directive("odometerDisplay",function($compile){//distribute bigNumber digits into individual table cells
var linkFunction = function(scope, element, attributes){
scope.bigNum = attributes["odometerDisplay"];
var oTbl="<table><tr>";//start the table
for(var a=0;a<scope.bigNum.length;a++){//build table cells with digits as content
oTbl+= scope.bigNum[a]!== "" ? "<td class=\"oCell\">"+scope.bigNum[a]+"</td>":'';
}
oTbl+="</tr></table>";//finish the table
var markUp=$compile(scope)(oTbl);//compile
element.append(markUp);//append to DOM
}
return {
restrict:"A",
template:'<div>{{oTbl}}</div>',
link:linkFunction
}
});
Essentially, linkFunction takes scope.bigNumber and writes each digit into a table cell (defined in variable oTbl). bigNumber is available in '$scope' and in the directive's 'scope' (that's not a problem).
The output (oTbl): <table><tr><td class="oCell">4</td><td class="oCell">8</td><td class="oCell">2</td><td class="oCell">7</td><td class="oCell">2</td></tr></table>
The output is just as it should be (a table with each cell hosting one of bigNumber's digits -- very simple).
The problem is that it does not render as HTML -- it simply renders the literal string defining the table and cells (even after an attempt to '$compile' and '$append').
This is merely the last attempt I've made at getting the directive to render the HTML -- I've tried myriad angles and approaches -- and have come to the conclusion there are things about directives I'm simply missing.
