문제

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.

도움이 되었습니까?

해결책

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top