Question

我正在尝试通过创建一个AngularJS指令来清理我的一些HTML代码，以便对表中的列进行排序。当我单击标题时，没有记录任何错误，但没有任何反应，列不会重新排序。

指令

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>

我在哪里错了？我是否需要使用$ apply之类的东西来使分类更改出现在dom中？

Answer 1

让指令工作，只需要将scope.$apply();添加到最后。

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

Answer 2

我可以建议通过过滤器而不是指令添加排序将以下代码添加到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>

在你的转发器上（如果它是一张桌子使用tr otherweiser li作为列表）请添加：

AngularJS自定义排序指令

2 个答案: