CODEWITHSUNDEEP
htmlangularjs
Mark
Mark

Reputation: 4950

Angular code inside of html strings

I am trying making the following code working:

var td = $(elem).treegrid('getPanel').find('div.datagrid-header td[field="itemtype"]');
        td[0].innerHTML = td[0].innerHTML + 
            '<table style="width:100%;margin-top:-8px;margin-left:2px"><tr>' +
            '<td style="width:18px;text-align:center">' +
                '<a href="" ng-click="getFilteredAssets(filterItemType)">' +
                    '<img border="0" src="all_filter.png">' +
                '</a>' +
            '</td>' + 
            '</td>' +
            '<td style="width:18px">' +
                '<img src="assets_filter.png"/>' +
            '</td>' +
            '<td style="width:18px">' +
                '<img src="projects_filter.gif"/>' + 
            '</td></tr></table>';

I am getting images into the place, but clicking on the image with ng-click specified doesn't do anything. Any idea how to make it work?

Thanks

Modified code

var element = $compile(angular.element
            ('<table style="width:100%;margin-top:-8px;margin-left:2px"><tr>' +
            '<td style="width:18px;text-align:center">' +
                '<a href="" ng-click="getFilteredAssets(filterItemType)">' +
                    '<img border="0" src="all_filter.png">' +
                '</a>' +
            '</td>' +
            '</td>' +
            '<td style="width:18px">' +
                '<img src="assets_filter.png"/>' +
            '</td>' +
            '<td style="width:18px">' +
                '<img src="projects_filter.gif"/>' +
            '</td></tr></table>')
            )(scope);
        td[0].innerHTML = td[0].innerHTML + element;

Upvotes: 0

Views: 90

Answers (1)

Keammoort
Keammoort

Reputation: 3075

Angular has no way of knowing you've added some HTML to your DOM. You should use a compile service. It will sweep HTML searching for ng-* directives and so on and apply it to current scope.

var element = $compile(angular.element('your html with ng-* directives''))(scope);

Then you can insert that element to your DOM.

Upvotes: 1

Related Questions