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，它会显示。< / p>

我尝试通过阅读AngularDart源找到解决方案，但我可以找到任何解决方案，所以我最终修补AngularDart将模板克隆附加到它插入的每个锚点，以便稍后我可以提取它并拼接回来。你可以看一下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

处理它

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

1 个答案: