Question

我为表排序创建了一个指令

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

这就是我使用它的方式：

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

之前工作正常。然而，今天我突然发现它不再起作用了。问题是，正如我通过调试器发现的那样，不评估ng-click的sort函数内部的{{key}}，以便将{{key}} literal传递给sort函数。我相信这是在我将angularjs从1.1.5升级到1.2之后发生的。

编辑：我在here创建了一个Plunker。最初，我使用来自font-awesome css的图标，但这些图标没有显示出来。我把它们改成了bootstrap.css中的gryphicons。我包括两个angular.js版本，其中一个被注释掉了。 如果启用版本1.1.5，则表格排序有效，但如果启用1.2.14，则无效。

Answer 1

最后就像我说的那样，你需要通过key，而不是'{{key}}'，你可以看到它在这里工作：

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

这个角度指令有什么问题？

1 个答案: