Angulardart markdown directive not working

0
votes

I'm trying to do the following:

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:markdown/markdown.dart' as md;

@Directive(selector: '[markdown]')
class MarkdownDirective {
  @Input('markdown')
  String marked;

  MarkdownDirective(Element el) {
      final html = md.markdownToHtml(marked);
      print(el.innerHtml); // this is empty
      print(html); // obv null
      el.setInnerHtml(html);
  }
}

I'm expecting innerHtml to have the value of the "markdown" content but it is null before it enters this directive.

        <div markdown>{{report.summary}}</div>

I've tried this too and no luck:

        <div [markdown]="'{{report.summary}}'" >{{report.summary}}</div>

Got interpolation ({{}}) where expression was expected at column 1 in ['{{report.summary}}'] - not understanding completely why it doesn't work./

3
dartangular-dart

3 Answers

1
votes

The error message is not related to directive at all, but to it's use in <div [markdown]="'{{report.summary}}'" >{{report.summary}}</div>.

Use either [markdown]="report.summary" or markdown="{{report.summary}}", but not both. The two variants I posted are equivalent (see here).

1
votes

just change how you set the markdown attribute... try:

<div markdown="**my message**"></div>

or

<div [markdown]="myVar"></div>

// somewhere in your class
String myVar = '**my message**';
0
votes

Dart automatically blocks unsafe content. You would need to specifically bypass security. One way you can do that is here: https://webdev.dartlang.org/api/angular/angular.security/DomSanitizationService-class