Angulardart 降价指令不起作用

Question

我正在尝试执行以下操作：

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

我希望 innerHtml 具有 "markdown" 内容的值，但在进入此指令之前它为空。

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

我也试过了，但没有成功：

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

Got interpolation ({{}}) where expression was expected at column 1 in ['{{report.summary}}'] - 不完全理解为什么它不起作用。/

Answer 1

Dart 会自动阻止不安全的内容。您需要专门绕过安全性。你可以这样做的一种方法是：https://webdev.dartlang.org/api/angular/angular.security/DomSanitizationService-class

Answer 2

只需更改设置 markdown 属性的方式...尝试：

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

或

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

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

Answer 3

该错误消息与指令完全无关，但与它在 <div [markdown]="'{{report.summary}}'" >{{report.summary}}</div> 中的使用有关。

使用 [markdown]="report.summary" 或 markdown="{{report.summary}}"，但不能同时使用。我发布的两个变体是等效的（参见 here）。

Angulardart 降价指令不起作用

Angulardart markdown directive not working

dart

angular-dart