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

Question

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?

The fact Angular makes it so difficult to do this highlights exactly *why* you shouldn't do it. HTML does not belong in the Controller. Pull it in via the View — CodingIntrigue, May 27 '14 at 12:27
In the project I'm working on I have to bind templates to sub-views in the main view, so I need to bin the template in the required panel (sub-view) with its functions — Kareem Elshahawy, May 27 '14 at 13:03

score 2 · Answer 1 · answered May 27 '14 at 13:54

Perhaps you need to compile the template inside the controller?

angular.controller('ABCDCtrl', function($scope, $compile){
    var templateHTML = '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()"></i></span>';
    $scope.template = $compile(templateHTML)($scope);
});

score 1 · Accepted Answer · answered May 27 '14 at 12:31

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?

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

2 Answers2

Linked