AngularJS自定义排序指令

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

我可以建议加用过滤排序，而不是由指令 的follwing代码添加到您的filters.js：在HTML

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

：

<div id="table-title-publisher" data-ng-click="orderByField='name'; reverseSort = !reverseSort;"></div> 

你的中继器（如果它是一张桌子用tr otherwiser李列表）请加：

Answer 2

得到了指令工作，只需要添加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(); 
      }); 
     } 
    } 
});