在自定义指令中成功使用$filter(orderBy)后，HTML未更新

Question

我正在创建一个名为ngSortable的自定义指令，它可以在单击元素时对数组使用orderBy过滤器。我已经逐步确定数组的排序是正确的，但是视图没有更新。过滤器被包装在作用域.$apply()中，所以我不知道它为什么不更新。我还在数组上设置了一个范围。$watch，以查看更改是否正在广播，而$watch没有捕获任何内容。如果有任何不同，我将使用jquery单击事件侦听器。如果有人能帮我找出我在这里做错了什么，我会非常感激的。

<table class="table table-bordered table-condensed">
<thead>
    <tr>
        <th ng-sortable="policyAcordTypes" enable-multiple="true" data-field="description" style="width: 40%;">Acord Type</th>
        .....
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in policyAcordTypes" >
        <td style="width: 40%; min-width: 140px">
            <div>{{item.description}}</div>
        </td>
        ....
    </tr>
</tbody>

Javascript

scope.$apply(function () {
    $filter('orderBy')(scope.$eval(attr.ngSortable), 'description');  
});

我试过这个..。

Javascript

scope.$apply(function () {
    var list = scope.$eval(attr.ngSortable);
    list = $filter('orderBy')(scope.$eval(attr.ngSortable), 'description');  
});

Answer 1

$filter('orderBy') 不修改传入数组的，它返回一个新的有序数组。您需要将返回的数组分配回范围的属性。

与其使用scope.$eval(attr.ngSortable)，不如使用[]操作符(标准javascript)

尝试：

scope.$apply(function () {
    scope[attr.ngSortable] = $filter('orderBy')(scope[attr.ngSortable], 'description');  
});

演示 (单击标题将对行进行排序)