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
– CodingIntrigue, Commented May 27, 2014 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
– Kareem Elshahawy, Commented May 27, 2014 at 13:03

Sriharsha · Accepted Answer · 2014-05-27 13:54:52Z

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); });

Toni · Accepted Answer · 2014-05-27 12:31:46Z

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?

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related