Angular code inside of html strings

Question

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;

Keammoort · Accepted Answer · 2015-08-01 21:33:51Z

1

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.

answered Aug 1, 2015 at 21:33

Keammoort

3,06517 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mark Over a year ago

I am getting an error: $compile is not a function. I am doing it in a directive.

Keammoort Over a year ago

What error are you getting? Have you added $compile service to your controller? Please show your angular controller code and is above code inside it?

Mark Over a year ago

I have added $compile to my controller alarms.controller('alarmsController', function ($scope, $compile, ....) Then in the directive I have var element = $compile( ....... The error: ReferenceError: $compile is not defined

Keammoort Over a year ago

You have to tell angular that you need this service : alarms.controller('alarmsController', ['$scope', '$compile', function ($scope, $compile, ....) {...}]);. Check this (docs.angularjs.org/guide/di) - section Controllers.

Mark Over a year ago

I will try to modify my code but I have another directive and another controller. The following code in that directive works without modification you are talking about: content: $compile('<div><table realtime-services-health></table></div>')(scope), and controller defined like this: home.controller('homeController', function ($scope, ....) {

|

Collectives™ on Stack Overflow

Angular code inside of html strings

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related