CODEWITHSUNDEEP
angularjsasp.net-mvc-4
Emirhan ÖZKAN
Emirhan ÖZKAN

Reputation: 79

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

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?

Upvotes: 1

Views: 1003

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

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

Upvotes: 2

Related Questions