Search code examples
javascripthtmlangularjsng-bind-html

ng-click won't work with ng-bind-html

I have html template like this:

$scope.template = '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()"></i></span>';

I want to bind this template using ng-bind-html, I tried to use it and also I used ng-bind-html-unsafe, but unfortunately It bind the html string as it is with no click action.

<span ng-bind-html="template"></span>
<span ng-bind-html-unsafe="template"></span>

I read about similar problem and it said that ng-click is loaded after ng-bind, so can anybody introduce to me how to solve this problem?

Solution

  • You could try ng-include and put your template in to a static file instead.

    Putting HTML content in scope variables kind of goes against some angular philosophy guidelines, I believe.

    If you were to later change the template, would you want it to rebind itself and be processed again?