AngularJS：編譯指令的輸出

Question

我有某種傳統的angularjs代碼，它使用指令創建動態表，在該指令中控制器可以覆蓋表的行為（關於如何顯示數據）

它由以下設置（簡化）組成：

指令的控制器

.directive('datatable', [function () {
    return {
        scope: {
            items: '=',
            tablemetadata: '=',
            processors: '=?'
        },
        controller: ...
        $scope.processField = function processField(item, data){
        if($scope.processors === undefined){return;}
            for(var i = 0; i < $scope.processors.length; i++){
                if($scope.processors[i].field===field){
                    var newData = $scope.processors[i].processor(item, data);
                    return $sce.trustAsHtml(newData);
                }
            }
            return data;
        };
    ...

指令的模板

<tr ng-repeat="item in items">
    <td ng-repeat="column in tableMetadata.columns" ng-bind-html="processField(column.field, $eval('item.'+column.field))"></td>
</tr>

控制者

$scope.myItems = [{id: 2, otherProperty: "text"}];

$scope.tableMetadata = {
    columns: [
        {field: 'id', headerKey: 'object id'},
        {field: 'otherProperty', headerKey: 'some data'},
    ]
};

$scope.tableProcessors = [
    {field: 'id', processor: function(entry, data){ //data = content of object.id
        var retVal = "<a ng-click='alert(" + data + ");'>click me</a>";
        return retVal;
    }}
];

管制員的觀點

<datatable items="myItems" tablemetadata="tableMetadata" processors="tableProcessors"></datatable>

我需要為某些特定屬性生成按鈕（或其他html元素），例如鏈接（如上所示）。

顯示按鈕，但是ng-click處理程序不起作用。 這是有道理的，因為它沒有編譯到范圍內。

如何正確編譯新元素並將其添加到表中？

Answer 1

一個簡單的解決方案可以是不使用隔離范圍。 將范圍從范圍：{...}更改為范圍：true，然后使用$ scope。$ eval評估屬性。

另一個解決方案（最優雅）可以是使用angularjs包含（請參閱此處 ）。 但是此解決方案要求修改您的指令的dom表示形式。

Answer 2

在指令的link方法中，您必須使用

elem.append( $compile(html)(scope) );

至於清楚地分離問題，我將使每個<td>都有自己的指令，該指令繼承您當前作為其隔離范圍屬性中的字符串連接的內容。 代替

var retVal = "<a ng-click='alert(" + data + ");'>click me</a>";

<tr ng-repeat="item in items">
    <td ng-repeat="column in tableMetadata.columns" ng-bind-html="processField(column.field, $eval('item.'+column.field))"></td>
</tr>

使用類似：

<tr ng-repeat="item in items">
  <table-item ng-repeat="..." process-field="item"></table-item>
</tr>

/** directive compiles dynamically */

scope: {
  processField: '='
},
link: function(scope, elem, attr, ctrl) {
  var template = `<a ng-click="${ctrl.processField}"></a>`;
  elem.append( $compile(template)(scope) );
}