Domanda

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.

È stato utile?

Soluzione

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top