Порядок сортировки AngularJsНе работает должным образом

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

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

Просмотрите здесь ЖУРНАЛ КОНСОЛИ http://embed.plnkr.co/DYwbqDzBVTkQalhDtc6i/

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

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

		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;
        };

	}])
	.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>



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

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


	</div>


angularjs sorting angularjs-orderby
person STEEL    schedule 13.01.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

      element.on('click', function() {
        scope.$apply(function() {
          scope.$parent.changeSort(scope.changeSortAttr);
        });
      });
person ngasull    schedule 13.01.2015
comment
спасибо за объяснение ;) Я заменяю строку прослушивания событий только сейчас на angular.element.bind('click', function(){ - person STEEL; 13.01.2015

arrow_upward

arrow_downward

person    schedule
comment
Спасибо, это работает. Но не могли бы вы объяснить, почему нам нужно использовать $apply - person STEEL; 13.01.2015
comment
Вы работаете за рамками angular js. onclick не является частью angular. Поэтому все, что вы изменяете в области, не будет отражаться в работе angular. $apply запустить цикл дайджеста angular, как указано в документах docs.angularjs.org/guide/scope/ - person squiroid; 13.01.2015