0

我创建了一个与数据表具有相似功能的指令，但它是为我们的应用程序定制的。我在指令范围内拥有的一件事是columnDefinitions. 该数组中的每个对象都有一个名为 的属性data。我已经对其进行了设置，因此如果将其设置为字符串，它会在实体上查找该属性，并且它是一个函数，它将使用实体调用该函数。所以基本上是这样的：

scope.getEntityData = function(entity, currColumnDefinitionData) {
            var entityData = null;
            if (angular.isString(currColumnDefinitionData))
            {
                entityData = entity[currColumnDefinitionData];
            }
            else if(angular.isFunction(currColumnDefinitionData))
            {
                entityData = currColumnDefinitionData(entity);
            }
            else
            {
                $log.error("Column defintion data property must be a string or a function. Cannot get entity data.");
            }
            return entityData;
        };

然后在我的指令模板中，是这样的：

<tr ng-repeat="currEntity in entities">
    <td ng-repeat="currColDef in columnDefinitions">
        {{getEntityData(currEntity, currColDef.data)}}
    </td>   
</tr>

当我只需要输出一个字符串时，这很有效。我现在有一个案例，我希望它为该列中的数据插入指令。我首先让 data 属性等于 HTML 字符串。例如：

data: function(entity) {
        return '<div my-directive></div>';
    },

但是，这导致字符串刚刚被插入到表格单元格中（Angular 为我转义了文本）

我想知道的是如何设置我的指令，以便我可以将编译后的指令放入我的表格单元格中。我考虑过用某种方式告诉自己这是一个指令，然后用$compile服务编译它，但后来我不知道从我的函数中返回什么才能让它正常工作。任何想法将不胜感激。

4

1 回答 1

1

这就是我将如何做到的

指令：

angular.module('ui.directives').directive('uiCompile',
    [ '$compile', function(compile) {
      return {
        restrict : 'A',
        link : function(scope, elem, attrs) {
          var html = scope.$eval('[' + attrs['uiCompile'] + ']')[0];

          elem.html(html);
          compile(elem.contents())(scope);
        }
      }
    } ]);

模板：

<tr ng-repeat="currEntity in entities">
    <td ng-repeat="currColDef in columnDefinitions" ui-compile="currColDef"></td>   
</tr>

基本上，对于每个列定义，使用当前范围将内容编译为模板。

于 2012-11-13T23:33:35.100 回答