Question

我正在使用带动态标头的ng-table。

我试图在我的表中添加一个jQuery colResize包装器指令。我的问题是该指令在thead到位之前就已经开始了，所以colResize没有效果。

如何在适当的时间调用指令？

这是我到目前为止的指令：

'use strict'

angular
    .module('myApp')
    .directive('colresizewrapper', function ($compile) {
        return {
           // A = attribute, E = Element, C = Class and M = HTML Comment
           restrict:'A',
           //High priority means it will execute first
           priority: 5000,
           terminal: true,
           compile: function colResizeCompile(element, attrs) {
              $(element).colResizable();

              var compiled = $compile(element, null, 5000);
              return function (scope) {
                  compiled(scope);
              }
           }

       };
   });

我添加的标题看起来像这样：

   <table data-ng-table="mainTable" template-header="ng-table/headers">
       <tbody>
            <tr data-ng-repeat="item in items>
               ....
            </tr>
       </tbody>
   </table>

   <script type="text/ng-template" id="ng-table/headers">
      <tr>
         <th>title</th>
      </tr>
   </script>

当代码运行时，指令立即被触发，但底部脚本需要一些时间才能进入dom。

任何帮助都会受到高度赞赏

由于

Answer 1

对我来说，通过link函数在指令中应用jquery contols的最佳方法是：

.directive('colresizewrapper', function ($compile) {
        return {
           // A = attribute, E = Element, C = Class and M = HTML Comment
           restrict:'A',
           //High priority means it will execute first
           priority: 5000,
           terminal: true,
           link: function (scope, element, attrs)  {

               scope.$evalAsync(function () {
                  //this place right after all angular processing
                  $(element).colResizable();   
               });

       };
   });

更新

工作插件here 解决方案是使用$timeout初始化插件

.directive('colresizewrapper', function ($compile,$timeout) {
        return {
           // A = attribute, E = Element, C = Class and M = HTML Comment
           restrict:'A',

           link: function (scope, element, attrs)  {

               scope.$evalAsync(function () {
                  //this place right after all angular processing
                 $timeout(function(){ $(element).colResizable();   },100);
               });

       }
   }});

更新2

为了支持更改数据源，您必须跟踪更改，并在$scope.tableParams.reload(); param类中调用ngtable：

 var data1 = [{name: "Moroni", age: 50},
                    {name: "Tiancum", age: 43},

        var data2 = [{name: "Nephi", age: 29},
                    {name: "Enos", age: 34},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27}];
        $scope.data = $scope.data1;

        //changing dataset
        $scope.changeDataset = function () {
          $scope.data = $scope.data2;

          //reloading ngtable
          $scope.tableParams.reload();

        };               

        $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10           // count per page
        }, {
            total: data.length, // length of data
            getData: function($defer, params) {
                //grab data
                var data=$scope.data;
                $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });

工作plunk

Angularjs ng-table将指令应用于动态标头

1 个答案:

更新

更新2