Question

我根据SQL返回的内容动态构建表。在下面的示例中，我可以填写表格，其中包含开始时间，结束时间和用户没有问题：

var StartTime = document.createElement('td');
var EndTime = document.createElement('td');
var InUser = document.createElement('td');
StartTime.innerText = value[i].startTime;
EndTime.innerText = value[i].endTime;
InUser.innerText = value[i].inUser;

输出将是一个表，其中包含我从SQL收到的条目数。我现在要做的是创建另一个td元素以添加到表的最后一列。这将是一个按钮，允许我显示和隐藏某些行。出于某种原因，单击按钮时，ng-click功能不起作用。下面是我如何创建td元素以及如何将按钮应用到它。

var ViewComments = document.createElement('td');
ViewComments.innerHTML = '<button type="button" ng-click="showHideComments()" class="r-primary-button">View Comments</button>';//apply click functionality.

当Ctrl + Shift + C点击表格查看页面上的元素时，我可以看到该行具有我指定的确切值（即类型，ng-click和类）。类属性正在工作，因为我在突出显示时将按钮的背景设置为蓝色，这样可以提供＆＃34;点击效果。＆＃34;我不确定为什么ng-click功能不起作用，因为我之前在应用程序中使用了ng-click，而不是动态创建按钮。我假设这个问题？如果是这样，有没有办法让ng-click功能可以动态创建按钮？

我在这个stackoverflow中看到他们正在使用$ compile： ng-click not working from dynamically generated HTML
这是解决这个问题的唯一方法吗？

任何帮助将不胜感激！

Answer 1

为什么不使用角度工具？这似乎是很多工作，而角度可以轻松完成。

<table ng-if="values">
    <tr ng-repeat="value in values">
        <td>{{value.startTime}}</td>
        <td>{{value.endTime}}</td>
        <td>{{value.inUser}}</td>
        <td><button type="button" ng-click="showHideComments()" class="r-primary-button">View Comments</button></td>
    </tr>
</table>

在您的控制器内

$http.get(someUrl).then(function(data){
    $scope.values = data;
});


$scope.showHideComments = function() {
    // do your thing here
};

Answer 2

是的，请使用compile。

正如医生说的那样

将HTML字符串或DOM编译到模板中并生成模板函数，然后可以将其用于将范围和模板链接在一起。

您可以创建一个可重用的指令，该指令将采用动态字符串并对其进行编译。

一个例子

<div ng-controller="Controller">
  <element-create message='htmlString'></element-create>
</div>

指令

angular.module("CompileDirective", [])
  .directive('elementCreate', ['$compile', function ($compile) {
      return { 
        restrict: 'E', 
        scope: {
            message: "="
        },
        replace: true,
        link: function(scope, element, attrs) {
            var template = $compile(scope.message)(scope);
            element.replaceWith(template);               
        },
        controller: ['$scope', function($scope) {
           ...
        }]
      }
  }])

放置在动态创建的按钮上时，不会触发ng-click属性

2 个答案: