Question

I created a directive for table sorting as

app.directive('msTableHeader', function ($compile) {
    return {
        restrict: 'EA',
        scope: {
            key: '@',
            title: '@',
            sortBy: '=',
            reverse: '='
        },
        link: function (scope, element) {
            var html = "<th class='{{key}}' nowrap>{{title}} &nbsp; <a ng-click=\"sort('{{key}}')\"><i class='icon-sort'></i></a></th>";
            var elm = $compile(html)(scope);
            element.replaceWith(elm);
        },
        controller: function ($scope) {
            $scope.sort = function (sortBy) {
                if ($scope.sortBy == sortBy)
                    $scope.reverse = !$scope.reverse;
                else
                    $scope.sortBy = sortBy;

                // icon setup
                $('th i').each(function () {
                    // icon reset
                    $(this).removeClass().addClass('icon-sort');
                });
                var icon = $scope.reverse ? 'icon-chevron-up' : 'icon-chevron-down';
                $('th.' + sortBy + ' i').removeClass().addClass(icon);
            };
        }
    }
});

This is how I use it:

   <th ms-table-header key="name" title="Name" sort-by="sortBy" reverse="reverse"/>

It was working fine earlier. However, today I suddenly find it's not working anymore. The problem is, as I found through debugger, that {{key}} inside of the sort function for ng-click is not evaluated, so that {{key}} literal got passed to sort function. I believe this happened after I upgraded angularjs from 1.1.5 to 1.2.

EDIT: I created a Plunker at here. Initially, I use icons from font-awesome css, but those icons don't show up. I changed them to gryphicons from bootstrap.css. I included two angular.js versions, with one commented out. If you enable version 1.1.5, the table sorting works, but if you enable 1.2.14, it doesn't work.

Was it helpful?

Solution

Finally it was like I said, you need to pass key, not '{{key}}', you can see it working here:

http://plnkr.co/edit/Af1PHb9LVqZbJCdnH6oz?p=preview

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top