0

データテーブルと同様の機能を持つディレクティブを作成しましたが、アプリ用にカスタマイズされています。ディレクティブスコープにあるものの1つはです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>

これは、文字列を出力する必要がある場合に最適です。その列にデータのディレクティブを挿入したい場合があります。最初に、データプロパティを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 に答える