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