How to pass an object in typescript to HTML string without angular $compile

Question

This is an angular program, but a package we wrote is in typescript. Basically what I am trying to solve is how do I make 'this' go into the HTML string as a real angular bound object. I can't use $compile because this is a typescript file. Any help is appreciated. Currently I can only pass pieces of the object as strings, like this.name.

    export class GroupView extends ObjView {
        name: string = "GroupView";

        constructor(parentView: GroupView, protected group: Group) {
            super(parentView, group)
            if(group){
                this.name = group.name
                this.structureItem = '<custom-directive this-model="' + this + '" name="' + this.name + '"></custom-directive>';
            }
        }
   }

Once the this.structureItem is added to the page, I need to be able to access this-model by reference... the actual object not a copy of it.

Answer 1

I'd suggest another approach. Use the ng-if -directive in the HTML-template. For example:

TS

constructor(parentView: GroupView, protected group: Group) {
    super(parentView, group)
        if(group){
            this.name = group.name;
    }
}

HTML

<custom-directive ng-if="group" name="name"></custom-directive>

This way the element will only be visible when group is valid.