Question

我已经创建了一个与数据表具有类似功能的指令，但它已经为我们的应用程序定制。我在指令范围内的一件事是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服务进行编译，但后来我不知道从我的函数返回什么才能正常工作。任何想法都会非常感激。

Answer 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>

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

如何从其他自定义指令动态添加自定义指令

1 个答案: