1

次のような一般的なテーブル ディレクティブを記述しようとしています。

<h-table rows="customers">
  <h-column field="Id">
    <a ng-click="editCustomer(row.Id)">{{row.Id}}</a>
  </h-column>
  <h-column field="Name">
  </h-column>
</h-table>

これにより、次の html が生成されます。

<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>
      <a ng-click="editCustomer(1)">1</a>
    </td>
    <td>
      Alexandre
    </td>
  </tr>
  ...
</table>

私のh-tableテンプレートは次のようなものです：

<script type="text/ng-template" id="hTableTemplate.html">
    <div>
        <div ng-transclude id="limbo" style="display: none"></div>
        <table>
            <tr>
                <th ng-repeat="col in cols">{{col.field}}<th>
            </tr>
            <tr ng-repeat="row in rows">
                <td ng-repeat="col in cols">
                    // Here I need to put the content of h-column directive 
                    // if it exists, or just bind the value for the column
                    <span ng-bind-html="getContentOrValueFor(row, col)" />
                </td>
            </tr>
        <table>
    </div>
</script>

したがって、h-table と h-column という 2 つのディレクティブを作成する必要があります。h-table ディレクティブは、両方のディレクティブで使用されるディレクティブ コントローラーを使用します。h-column ディレクティブは、このコントローラーを使用して列をテーブルに追加し、行/列の値を取得します。

これまでのところ、これは私のディレクティブのコントローラーです:

.controller("hTable", function ($scope, $element, $attrs, $compile) {
    $scope.cols = [];

    this.addCol = function (col) {
        $scope.cols.push(col);
    };

    $scope.getContentOrValueFor = function (row, col) {
        // MY PROBLEM IS HERE! I will explain below ...
        return col.content && col.content.html() ? col.content.html() : row[col.field];
    };
})

私の h-column ディレクティブは、h-table のコントローラーを受け取ります。transclude を使用してコンテンツを取得し、このコンテンツを col オブジェクト内に保存してからバインドします。

.directive("hColumn", function () {
    return {
        restrict: "E",
        require: "^hTable",
        transclude: true,
        scope: {
            field: "@",
        },
        link: function(scope, element, attrs, hTableController, transclude) {
            var col = {};
            col.field = scope.field;
            col.content = transclude();  // <-- Here I save h-column content to bind after
            hTableController.addCol(col);
            ...
        }
    };
})

そして最後に:)私のh-tableディレクティブ：

.directive("hTable", function () {
    return {
        restrict: "E",
        scope : {
            rows: "="
        },
        controller: "hTable",
        require: "hTable",
        replace: true,
        transclude: true,
        templateUrl: "hTableTemplate.html",
        link: function(scope, element, attrs, hTableController) {
        ...
        }
    };
})

h-column のコンテンツを td タグ内に配置する必要があります。したがって、getContentOrValueFor 関数を呼び出して、h-column のディレクティブ内にあるこのコンテンツを取得します。

コンテンツがない場合は、フィールドの値でバインドします。

h 列の内容が {{1+2+3}} のようなものであれば、正常に動作します (6 と表示されますが、問題ありません)。

ただし、このコンテンツが次のような html タグの場合:

<a href="somelink">test</a>

「html.indexOf は関数ではありません」というエラーが表示されます

どうすればこれを達成できますか??

4

1 に答える 1

0

それは ngSanatize が含まれていないことが原因だと思います。参照: https://docs.angularjs.org/api/ng/directive/ngBindHtml

于 2014-10-23T20:04:57.773 に答える