如何在 angularjs 中将 HTML 和 onclick 函数插入到视图中

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

更多信息请参考以下链接How to make ng-bind-html compile angularjs code

建议：

尝试使用 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) {
    ...

};