Ng-click is not working with ng-bind-html in ng-repeat

Question

I'm trying to get the data with using Jsonresult and Angularjs in MVC4.

Jsonresult function in the Controller:

public JsonResult GetQuestionSets() {
//...
var selectedData = titles.Select(y => new
{
    //...
    qsAction = y.qtConfirm.Equals(false) ? "<button type='button' class='btn btn-warning btn-sm' ng-click='getQSetId(qset.qsTitleID)'>Edit</button>" : y.Questions.All(z => z.qStatus == null) ? "<button type='button' class='btn btn-success btn-sm disabled'>Waiting</button>" : y.Questions.All(z => z.qStatus == true) ? "<button class='btn btn-success btn-sm'>Preview</button>" : "<button type='button' class='btn btn-warning btn-sm'>Edit</button>",
});

return Json(selectedData, JsonRequestBehavior.AllowGet);

}

AngularJS to get result:

$http.get('/Tutor/GetQuestionSets').then(function (response) {
$scope.questionSets = response.data;
});
$scope.trustedHtml = $sce.trustAsHtml;// Convert string to html

View:

<table class="table table-striped">
<thead>
    //...
</thead>
<tbody>
    <tr ng-repeat="qset in questionSets">
        //...
        <td align="center" ng-bind-html="trustedHtml(qset.qsAction)"></td>
    </tr>
</tbody>
</table>

My question is:

Ng-click which is coming through the json result <button type='button' class='btn btn-warning btn-sm' ng-click='getQSetId(qset.qsTitleID)'></button> not working. But when I change the ng-click to onclick with simple function its working. Do you know why and solution?

Maxim Shoustin · Accepted Answer · 2017-08-15 08:12:51Z

2

The ng-bind-html deals with pure DOM and not Angular directives like ng-click. Angular has no idea about to include ngClick to digest cycle and therefore listen on events. You need to $compile it 1st. Or use angular-bind-html-compile that will do both things in one place

answered Aug 15, 2017 at 8:12

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

1 Comment

Emirhan ÖZKAN Over a year ago

Thank you for answer :) angular-bind-html-compile solved my problem

Collectives™ on Stack Overflow

Ng-click is not working with ng-bind-html in ng-repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related