I found this interesting example on a JSFiddle that I'm trying to adapt for dynamic date population in my Angular ng-repeat. The example works, but I'm having trouble with data-binding. Below is the code snippet:
JavaScript
.directive('markdown', function () {
var converter = new Showdown.converter();
return {
restrict: 'A',
link: function (scope, element, attrs) {
console.log(element.text()); //Shows {{post.article}}
var htmlText = converter.makeHtml(element.text());
element.html(htmlText);
}
};
})
HTML
<div ng-repeat="post in posts">
<div markdown>{{post.article}}</div> <!-- Result: ##Testing -->
<div markdown>**Testing**</div> <!-- Result: <strong>Testing<strong>-->
</div>
The HTML comment above each output shows the expected result. However, the first output did not match. Can you help me find the issue or what I might be missing?
Console Output Notes
outerHTML: "<div markdown="" class="ng-binding"><p>{{post.article}}</p></div>"
outerText: "{{post.article}}↵↵"
outerHTML: "<div markdown=""><strong>Testing</strong></div>"
outerText: "Testing↵"
Note: Review the console comment in the JS section for further details - console.log(element.text());