Не удается отсортировать таблицу с динамическим заголовком таблицы в angularjs?

Question

У меня проблема с сортировкой таблицы с динамическим заголовком таблицы. Я использовал директиву со статическим заголовком таблицы, она работает нормально.

Код JavaScript:

  .directive("sort", function() {
return {
    restrict: 'A',
    transclude: true,
    template : 
      '<a ng-click="onClick()">'+
        '<span ng-transclude></span>'+ 
        '<i class="glyphicon" ng-class="{\'glyphicon-sort-by-alphabet\' : order === by && !reverse,  \'glyphicon-sort-by-alphabet-alt\' : order===by && reverse}"></i>'+
      '</a>',
    scope: {
      order: '=',
      by: '=',
      reverse : '='
    },
    link: function(scope, element, attrs) {
      scope.onClick = function () {
        if( scope.order === scope.by ) {
           scope.reverse = !scope.reverse 
        } else {
          scope.by = scope.order ;
          scope.reverse = false; 
        }
      }
    }
}

Я прокомментировалСтатический код заголовка и пробный заголовок с ng-repeat. Он не работает для меня. Пожалуйста, найдите прикрепленную ссылку на плункер.

Плункер

Любая помощь будет оценена.

Спасибо!

Answer 1

Есть 2 проблемы с вашим кодом:

1. В вашем html есть следующее

   <th ng-repeat="header in header" sort order="'{{header.id}}'" by="order" reverse="reverse">{{header.tableHeaderTitle}}</th>
   

   , где это должно быть (посмотрите на заказ)

   <th ng-repeat="header in header" sort order="header.id" by="order" reverse="reverse">{{header.tableHeaderTitle}}</th>
   

2. Проблема с вашей областью, вы можете легко проверить ее, заменив

   if( scope.order === scope.by ) {
      scope.reverse = !scope.reverse 
   }
   

   на

   if( scope.order === scope.by ) {
      scope.$parent.$parent.reverse = !scope.reverse 
   }
   

Я настоятельно рекомендую вам взглянуть на следующую страницу официальной документации angularjs, чтобы узнать больше о директивах и их областях действия.

https://docs.angularjs.org/guide/directive