CODEWITHSUNDEEP
dartangular-dart
Vyacheslav Egorov
Vyacheslav Egorov

Reputation: 10492

Creating AngularDart component that can display it's inner HTML

I have been trying to create a component for illustrative purposes that could display it's own inner HTML markup before it was processed by AngularDart itself, e.g. if I write

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

I want to have actual markup displayed under the normally rendered h1. I tried the following code:

@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>

This works for simple cases but it does not work if something inside <view-source> is compiled via transclusion, so instead of h1 with ng-if it will show <!-- ANCHOR:... -->.

I tried to find a solution by reading AngularDart source, but I could find any, so I ended up patching AngularDart to attach template clone to each anchor it inserts, so that later I can extract it and splice back in. You can see a demo of that.

I wonder if there is a clean solution without patching AngularDart.

Upvotes: 2

Views: 905

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657028

I used the ng-non-bindable directive to achive this.

AngularDart UI (looks somewhat broken because the tab control is still missing)

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

I load the HTML template file using an HTTP request, insert it using ng-bind and prevent Angular from processing it using ng-non-bindable

Upvotes: 1

Related Questions