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 表模板类似于：

<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。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 列的内容放在 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 回答