Как вставить HTML вместе с функцией onclick в представление angularjs

Question

Я пытаюсь визуализировать HTML в моем представлении, и я хочу вставить вызов функции внутри этого HTML, но не понимаю, как я могу это сделать. Вот мой 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>

Можно ли таким способом добавить объект пациента в функцию popup()?

Answer 1

HTML: $eval помогает оценить различные угловые выражения

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

JS

Это может помочь вам,

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) {
    ...

};

Вы передаете объект пациента во всплывающей функции, я думаю, что он может не работать. Если это не работает, попробуйте использовать JSON.stringify

Обратитесь по следующей ссылке для получения дополнительной информации Как заставить ng-bind-html компилировать код angularjs

Предложение:

Попробуйте использовать директиву ng-repeat вместо angular.forEach. Я думаю, что вы можете легко выполнить ваши требования, используя ng-repeat, для справки:

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

ОБНОВЛЕНО:

Попробуй это

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) {
    ...

};