Как я могу скомпилировать jQuery-сортируемый дроп для угловых привязок? - PullRequest
Новая
       40

Как я могу скомпилировать jQuery-сортируемый дроп для угловых привязок?

1 голос
/ 24 сентября 2019

Я использую jQuery sortable() с Angular, динамически добавляющим строки таблицы.Когда я прибегаю к строке таблицы, она испортила угловые привязки, переставляя строки и добавляя новые строки при нажатии кнопки из случайных положений.Из других ответов я обнаружил, что использование $compile()(scope) помогает в этой ситуации, но я не могу найти, как и где получить отбрасываемую строку HTML и скомпилировать ее здесь перед отбрасыванием. 

<tbody id="table">
  <tr ng-repeat="item in invoice.items">
    <td><span id='line'>{{ $index + 1 }}</span></td>
    <td><input type="text" ng-model="item.name" class="form-control" /></td>
    <td><input type="text" ng-model="item.description" class="form-control" /></td>
    <td><input style="width:150px;" type="number" ng-model="item.qty" class="form-control" /></td>
    <td><input style="width:150px;" type="number" ng-model="item.weight" class="form-control" /></td>
    <td><input style="width:150px;" type="number" ng-model="item.total" class="form-control" value="{{item.qty*item.weight}}" disabled/></td>
    <td><button type="button" class="btn btn-danger" ng-click="remove($index)">Delete</button></td>
  </tr>
</tbody>

jQuery code: 

function resetids() {
  var ids = $('table tbody tr td span#line');
  var noofids = ids.length;
  for (var s = 0; s < noofids; s++) {
    console.log(s);
    var n = s + 1;
    ids[s].innerHTML = n;
  }
}

$('table tbody').sortable({
  items: 'tr[class!=static]',
  placeholder: 'myPlaceholder',
  helper: fixWidthHelper,
  start: function(event, ui) {
    $(ui.item).addClass("tilt");
    $(ui.item).removeClass("shadow");
  },
  stop: function(event, ui) {
    $compile(ui.item)(scope)
    $(ui.item).removeClass("tilt");
    resetids();
    $(ui.item).addClass("shadow");
  },
}).disableSelection();

function fixWidthHelper(e, ui) {
  ui.children().each(function() {
    $(this).width($(this).width());
  });
  return ui;
}

Угловой код: 

var invoice = angular.module('invoice', []);
invoice.controller('InvoiceController', function($scope) {
  $scope.invoice = {
    items: [{
      name: 'item',
      description: 'item description',
      qty: 5,
      weight: 5,
    }]
  };

  $scope.add = function() {
      $scope.invoice.items.push({
        name: '',
        description: '',
        qty: 1,
        weight: 0
      });
    },
    $scope.remove = function(index) {
      $scope.invoice.items.splice(index, 1);
    },
    $scope.totalqty = function() {
      var totalqty = 0;
      angular.forEach($scope.invoice.items, function(item) {
        totalqty += item.qty;
      })
      return totalqty;
    },
    $scope.totalweight = function() {
      var totalwgt = 0;
      angular.forEach($scope.invoice.items, function(item) {
        var wgt = item.weight || 0;
        totalwgt += item.qty * item.weight;
      })
      return totalwgt;
    }
});
...