4

在我看来,我有这个:

     <table class="table table-bordered" id="resultsTable">
        <thead>
          <th>Classification</th>
          <th>Date</th>
        </thead>
        <tr ng-repeat="result in results">
          <td>{{result.result}}</td>
          <td>{{result.date}}</td>
        </tr>
      </table>

我想使用浮动标题,但由于第一次加载页面时表格为空,它给了我奇怪的结果(http://www.fixedheadertable.com/

如果表格内容是静态的,则可以正常工作:

$(document).ready(function() {
  $('#resultsTable').fixedHeaderTable({ footer: true, cloneHeadToFoot: false, fixedColumn: false   });
});

在控制器中,我有这个功能,它在按下按钮后加载数据:

 $scope.loadResults = function() {
    var url = "URL WITH QUERY";
    $http.get(url).success(
      function(data, status, headers, config) {
        for (var i = 0; i < data.length; i++) {
            $scope.results.push({date: data[i].date, p: data[i].p, result: data[i].result});
        }

//**IDEALLY I WOULD WANT TO RUN THE JQUERY LINE HERE**

      }
    );
  };

所以我想做的是在将所有数据加载到结果数组之后运行我通常会在准备好文档时运行的这一行。

你会怎么做?

请,请提供一个示例,因为我一直在阅读有关“指令”的内容,但没有人说它究竟如何允许调用 jquery,应该将所需的 jquery 行放在哪里,或者如何从我的控制器调用它。

4

2 回答 2

2

$emit您可以使用范围事件或在您$broadcast$on范围内在适当的时间调用 jQuery 函数 来简单地实现这一点。

$emit和之间的区别$broadcast

  • $broadcast -- 将事件向下调度到所有子范围,
  • $emit——通过作用域层次向上调度事件。

这个例子将有助于理解它:http: //jsfiddle.net/sebmade/GkarV/

于 2013-06-01T22:36:13.973 回答
1

没有什么能阻止你这样做:

$scope.loadResults = function() {
    var url = "URL WITH QUERY";
    $http.get(url).success(
      function(data, status, headers, config) {
        for (var i = 0; i < data.length; i++) {
            $scope.results.push({date: data[i].date, p: data[i].p, result: data[i].result});
        }
        $('#resultsTable').fixedHeaderTable({ footer: true, cloneHeadToFoot: false, fixedColumn: false   });
      }
    );
  };

但这不是最佳实践。

此外,您可能需要等待 Angular 摘要循环完成,以便处理 ng-repeat。您可以使用其中一个$timeout()或可能使用 a来做到这一点$scope.$evalAsync()(我不确定在这种情况下以后的工作是否 100%,它可能仍然过早触发,因此您需要对其进行测试)。

更简洁的解决方案是为该插件创建一个指令。我在Fixed Header Table插件的文档中看不到任何允许动态数据的内容,因此您需要通过承诺来解决该问题,以确保在数据准备好并呈现后进行初始化,或者观察结果数组以调用destroy插件并重新初始化它。

于 2013-06-01T23:20:17.360 回答