dart - 创建可以显示其内部HTML的AngularDart组件

Question

我一直在尝试创建一个组件用于说明目的，可以在由AngularDart本身处理之前显示它自己的内部HTML标记，例如如果我写

<view-source>
  <h1 ng-if="foo == 1">{{bar}}</h1>
</view-source>

我想在正常呈现的 h1下显示实际标记。我尝试了以下代码:

@NgComponent(
    selector: 'view-source',
    templateUrl: 'view-source.html',
    publishAs: 'self'
)
class ViewSource {
  var template;
  ViewSource(dom.Element element) : template = element.innerHtml;
}

<!-- view-source.html -->
<div>
  <div class="rendered">
    <content></content>
  </div>
  <div class="template">
    {{self.template}}
  </div>
</div>

这适用于简单的情况，但如果 <view-source>中的某些内容是通过包含转换编译的，则不起作用，因此将显示 h1而不是 ng-if和 <!-- ANCHOR:... -->。

我试图通过阅读AngularDart源代码来找到解决方案，但是我能找到任何解决方案，所以我最终对AngularDart进行了修补，将模板克隆附加到它插入的每个 anchor 上，以便稍后我可以将其提取并拼接回去。您可以看到 demo其中。

我想知道是否有一个无需修补AngularDart的干净解决方案。

Answer 1

我使用ng-non-bindable指令实现了这一目标。

AngularDart UI
(由于标签控件仍然缺失，因此看起来有些破损)

代码https://github.com/akserg/angular.dart.ui.demo/search?q=ng-non-bindable&ref=cmdform

我使用HTTP请求加载HTML模板文件，使用ng-bind插入它，并阻止Angular使用ng-non-bindable处理它