Angularjs ng-table применяет директиву к динамическому заголовку

Я использую ng-таблицу с динамическими заголовками.

Я пытаюсь добавить в свою таблицу директиву оболочки 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.

Любая помощь будет высоко оценена

Спасибо


angularjs angularjs-directive ngtable
person Just2Click    schedule 09.10.2014    source источник
comment
почему вам нужно вызывать compile ?   -  person Kostia Mololkin    schedule 10.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

для меня лучший способ применить элементы управления jquery внутри директивы через функцию link:

.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();   
               });

       };
   });

Обновлять

Рабочий планк здесь решение использует $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(); в классе параметров 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()));
            }
        });

работает переход

person Kostia Mololkin    schedule 10.10.2014
comment
Добрый день, Костя, спасибо за ответ. Я использовал компиляцию, так как только начинаю работать с Angular и все еще учусь. Я попробовал ваш код, и он все еще не работает. Я попытаюсь создать плункер для этого позже. - person Just2Click; 11.10.2014
comment
плюшка пригодится, если нужно, тоже сделаю - person Kostia Mololkin; 11.10.2014
comment
скажите мне, если перезагрузка данных приведет к сбою инициализации плагина - person Kostia Mololkin; 14.10.2014
comment
Вау, выглядит отлично, я добавлю это в свое приложение и дам вам знать. На самом деле в какой-то момент я пытался использовать $timeout, но у меня всегда было ощущение, что это неправильно. - person Just2Click; 15.10.2014
comment
это не всегда неправильно, я думаю, что все должно быть в порядке, из-за схемы обработки событий в angular, поэтому в основном это должно работать с любым значением тайм-аута. - person Kostia Mololkin; 15.10.2014
comment
я постараюсь заставить его работать без $timeout, потому что я согласен, что лучше избегать использования таймера - person Kostia Mololkin; 15.10.2014