1

我这样做对吗？我的范围有一些从控制器分配给它的 json。我正在使用 angularForEach 遍历它。

我希望能够将我的 td 数据格式化为日期。这是一个简单的例子。理想情况下，我想对我的行值使用日期过滤器，但语法似乎不正确。[编辑] 我想我需要使用“插值”[/编辑]

大多数示例都适用于大括号，并且似乎在实际视图中。有人可以建议 - 我害怕我会走自己的路。

.directive('betterTable', function () {
    return {
        restrict: 'E',        
        link: function ($scope, element, attrs) {

            var html = '<table border="1" width="100%">';
            html += '<tr>';
            angular.forEach($scope.result, function (row, index) {
                html += '<td>'; 
                html += row;
                html += '</td>';
            });
            html += '</tr></table>';

        }
   } 
 });
4

2 回答 2

1

你可以这样做：

.directive('betterTable', function () {
  return {
    restrict: 'E',
    template: '<table border="1" width="100%">' +
      '<tr>' +
        '<td ng-repeat="row in result">{{row|date:"short"}}</td>' +
      '</tr>' +
    '</table>',
    link: function ($scope, element, attrs) {
      // Nothing to see here...
    }
  } 
});

老实说，您真的不需要为此提供指令。

如果您真的想在链接函数中执行循环（我不建议这样做），这应该让您开始：

.directive('betterTable', ['$compile', function ($compile) {
  return {
    restrict: 'E',        
    link: function ($scope, element, attrs) {

        var html = '<table border="1" width="100%">';
        html += '<tr>';
        angular.forEach($scope.result, function (row, index) {
          html += '<td>';
          html += $compile("{{row|date:'short'}}")($scope);
          html += '</td>';
          // This could also be expressed on one line as:
          // html += $compile("<td>{{row|date:'short'}}</td>")($scope);
        });
        html += '</tr></table>';

    }
  } 
}]);

编辑：为了清楚起见，根据您发布的内容，我认为没有任何理由创建指令。你可以把它放在你的视图中：

<table border="1" width="100%">
  <tr>
    <td ng-repeat="row in result">{{row|date:"short"}}</td>
  </tr>
</table>
于 2013-06-06T23:03:49.223 回答
0

如果您仍想创建指令，那么设置部分 HTML 文件怎么样？

指示

.directive('betterTable', ['$compile', function () {
  return {
    restrict: 'E',
    templateURL: '/root/to/partials/better_table.html',
    link: function ($scope, element, attrs) {
        // As you're not restricting the scope, $scope.result will exist here.
    }
  } 
}]);

better_table.html （正如@rtcherry 建议的那样）

<table border="1" width="100%">
  <tr>
    <td ng-repeat="row in result">{{row|date:"short"}}</td>
  </tr>
</table>

这样，您将获得更好的结构化代码以及正确更新的范围:)

希望能帮助到你

于 2013-06-07T00:07:41.623 回答