AngularJS custom sort directive

Question

I'm trying to clean up some of my HTML code by creating an AngularJS directive for sorting columns in my tables. When I click on the heading, no errors are logged, but nothing happens, the column isn't reordered.

directive

Glenn.directive('sort', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.predicate = 'title';
            scope.reverseSort = false;

            element.on('click', function() {
                scope.predicate = attrs.sort;
                scope.reverseSort != scope.reverseSort;
            });
        }
    }
});

html

<th>
    <a sort="title" href="">Title
        <span ng-show="predicate == 'title'">
            <span ng-show="!reverseSort"><i class="fa fa-caret-up"></i></span>
            <span ng-show="reverseSort"><i class="fa fa-caret-down"></i></span>
        </span>
    </a>
</th>

Where am I going wrong here? Do I need to use something like $apply to make the sorting changes appear in the dom?

Mitch · Accepted Answer · 2014-07-13 16:21:09Z

2

Got the directive to work, just needed to add scope.$apply(); to the end.

Glenn.directive('sort', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.predicate = 'title';
            scope.reverseSort = false;

            element.on('click', function() {
                scope.predicate = attrs.sort;
                scope.reverseSort != scope.reverseSort;
                scope.$apply();
            });
        }
    }
});

answered Jul 13, 2014 at 16:21

Mitch

1,3945 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charlietfl Over a year ago

right, you are adding an event that is outside of angular so when that event fires and changes scope you need to tell angular to run a digest

Liad Livnat · Accepted Answer · 2014-07-13 16:18:20Z

1

i can suggest add sorting by filter and not by directive add the follwing code to your filters.js:

.filter('orderObjectBy', [function() {
return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
        filtered.push(item);
    });
    filtered.sort(function (field_a, field_b) {
        var result =  (parseFloat(field_a) - parseFloat(field_b));
        if (isNaN(result)) {
            if (field_a > field_b)
            {
                return 1;
            }
            else if (field_a < field_b)
            {
                return -1;
            }
            else
            {
                return 0;
            }
        }
        return result;


    });
    if(reverse) filtered.reverse();
    return filtered;
};
}]);

on html:

<div id="table-title-publisher" data-ng-click="orderByField='name'; reverseSort = !reverseSort;"></div>

on your repeater (in case it's a table use tr otherwiser li for list) please add:

answered Jul 13, 2014 at 16:18

Liad Livnat

7,49517 gold badges62 silver badges98 bronze badges

1 Comment

Mitch Over a year ago

No thanks, I don't want to use a filter, I'm trying to clean up the HTML and don't want to add ng-click="orderByField='name'; reverseSort = !reverseSort;"

Collectives™ on Stack Overflow

AngularJS custom sort directive

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related