AngularJs Sort orderBy не работает должным образом

Question

Скажите, пожалуйста, что не так в моем коде. Когда вы нажимаете на заголовки таблиц, $ scope.sort получает правильные значения, но не сортирует таблицу по алфавиту.

Вы можете просмотреть plunkr здесь с JSON файл: http://plnkr.co/edit/DYwbqDzBVTkQalhDtc6i?p=preview

View здесь, чтобы посмотреть CONSOLE LOG http://embed.plnkr.co/DYwbqDzBVTkQalhDtc6i/

var ssgaApp = angular.module('ssgaApp', []); 
 

 
\t ssgaApp.controller('mainCtrl',['$scope', '$http', function ($scope,$http) { 
 
\t \t var getEntries = $http.get('altLoginServlet.json'); 
 

 
\t \t getEntries.success(function (data, status, headers, config) { 
 
      $scope.ajaxerror = false; 
 
      $scope.companies = data.data; 
 
     }); 
 

 
     getEntries.error(function(data, status, headers, config) { 
 
      $scope.ajaxerror = true; 
 
     }); 
 

 

 
     $scope.sort = {column: '', descending: true}; 
 
     $scope.changeSort = function(column) { 
 
      // console.log($scope.sort); 
 
      
 
      $scope.sort.column = column; 
 
      $scope.sort.descending = !$scope.sort.descending; 
 
      console.log('$scope.sort.column', $scope.sort.column, '$scope.sort.descending', $scope.sort.descending); 
 

 
      $scope.currentPage = 1; 
 
      $scope.currentPage_grid = 1; 
 
     }; 
 

 
\t }]) 
 
\t .directive('changeSortdirective', ['$timeout', function($timeout) { 
 

 
     return { 
 
      restrict: 'A', 
 
      scope: { 
 
       changeSortAttr: '@changeSortdirective' 
 
      }, 
 
      link: function (scope, element, attrs) { 
 

 
       console.log('changeSortAttr', scope.changeSortAttr); 
 

 
       element.on('click', function(){ 
 
        console.log('changeSort bind', scope.changeSortAttr); 
 

 
        scope.$parent.changeSort(scope.changeSortAttr); 
 

 
       }); 
 

 
      } 
 
     }; 
 

 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 

 
\t <div ng-app="ssgaApp" ng-controller="mainCtrl"> 
 
\t \t 
 

 
\t \t <table class="leftPadding"> 
 
    \t   
 
    \t   <thead> 
 
    \t    <tr> 
 
    \t     <th width="80%"> 
 
        <a href="javascript:void(0)" change-sortdirective="companyName">Name <span></span></a> 
 
        </th> 
 
    \t     <th> 
 
        <a href="javascript:void(0)" change-sortdirective="id">ID <span></span></a> 
 
        </th> 
 
    \t    </tr> 
 
    \t   </thead> 
 
    \t   
 
    \t   <tbody> 
 
    \t    <tr ng-repeat="comp in companies | orderBy:sort.column:sort.descending "> 
 
    \t     <td class="col1" ng-show="comp.companyName"><a href="javascript:void(0)" ng-click='toggleModal(comp.id)'>{{comp.companyName}}</a></td> 
 
    \t     <td class="col1" ng-show="comp.loginName"> 
 
        <a ng-click="doAltLogin(comp.loginName)" href="javascript:void(0)">{{comp.lastName}}, {{comp.firstName}}</a></td> 
 
    \t     <td ng-bind="comp.id"></td> 
 
    \t    </tr> 
 
    \t   </tbody> 
 
    \t   
 
    \t  </table> 
 

 

 
\t </div>

Answer 1

Поскольку вы используете onclick событие DOM и не ngClick директива, Angular не обнаруживает взаимодействия пользователя.

Вам может понадобиться, чтобы обновить $scope вручную:

 element.on('click', function() { 
     scope.$apply(function() { 
      scope.$parent.changeSort(scope.changeSortAttr); 
     }); 
     }); 

Answer 2

Very simple use 

    $scope.$apply(function() { 
      $scope.sort=angular.copy($scope.sort); 
      }); 

Plunker="http://plnkr.co/edit/f5lAp33c8VSwnVwDVLhA?p=preview"