How to insert HTML along with onclick function into view in angularjs

Question

I am trying to render html into my view and i want to insert a function call inside this html but not getting any idea how i can do this. Here is my javascript:

        angular.forEach($scope.patients, function (patient) {
         tableRow = tableRow + [
             '<div data-ng-click="popup("+patient+")">',
                 '<div class="name-container">+patient.name+</div>',

             '</div>'].join('');
    });
    $scope.renderHTML =$sce.trustAsHtml(tableRow);

    $scope.popup = function(patient) {
    ...

};

HTML:

  <div data-ng-bind-html="renderHTML">
             </div>

Is it possible to add patient object in popup() function using this way ?

Answer 1

HTML: $eval helps to evaluate different angular expressions

<div data-ng-bind-html="$eval(renderHTML)">
             </div>

JS

It may help you,

angular.forEach($scope.patients, function (patient) {
         tableRow = tableRow + [
             '<div data-ng-click="popup("'+patient+'")">',
                 '<div class="name-container">'+patient.name+'</div>',

             '</div>'].join('');
    });
    $scope.renderHTML =$sce.trustAsHtml(tableRow);

    $scope.popup = function(patient) {
    ...

};

You are passing patient object in popup function, I think it may not work. If it doesn't work try using JSON.stringify

Refer following link for more information How to make ng-bind-html compile angularjs code

Suggestion:

Try to use ng-repeat directive in the place of angular.forEach. I think you can achieve your requirement easily by using ng-repeat, for reference:

 <div ng-repeat="patient in patients">
        <div data-ng-click="popup(patient)">
           <div class="name-container">patient.name</div>
           </div>
        </div>
    </div>

MODIFIED:

Try this

angular.forEach($scope.patients, function(value,key){
         tableRow = tableRow + [
             '<div data-ng-click="popup("'+patients[key]+'")">',
                 '<div class="name-container">'+patients[key].name+'</div>',

             '</div>'].join('');
    });
    $scope.renderHTML =$sce.trustAsHtml(tableRow);

    $scope.popup = function(patient) {
    ...

};