如何使用带有隔离指令的过滤器和排序？答案

【问题标题】：how to use filter and orderby with isolated directive?如何使用带有隔离指令的过滤器和排序？
【发布时间】：2015-08-03 10:42:14
【问题描述】：

我制作了一个具有隔离范围的自定义指令，并且也在该指令中获取数据，但现在我的过滤器和排序在这里不起作用是我的指令：

    <div my-data remoteurl='url' filter='test'>
    </div>

控制器：

 (function() {

 'use strict';

   var myApp = angular.module('myApp', [])
    .controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.url = 'https://www.reddit.com/r/worldnews/new.json';
  $scope.filter= 'test';
  $scope.orderBy= 'sortExpression';
}])
.directive('myData', ['$http', function($http) {
  return {
    restrict: 'A',
    scope: {
      remoteurl: '=',
      filter: '=',
      orderBy: '='
     // orderBy:'sortExpression':'order' ;
    },
    templateUrl: 'DataTable.html',
    link: function(scope, element, attr) {

      $http.get(scope.remoteurl)
        .success(function(response) {
          scope.names = response.data.children;
        });
    }
  };
}]);

})();

数据表.html

<ul>
     <li >
     <table  width="80%" id="dataTable" align="center" name="table1">
         <tr>
             <td><strong>Title</strong></td>
             <td><strong>Link</strong></td>
             <td><strong>Score</strong></td>
         </tr>
         <tr ng-repeat="x in names |filter:test|orderBy:sortExpression:order ">

             <td id="title"><a  ng-href="{{ x.data.url}}">{{x.data.title}}</a></td>
             <td ><a ng-href="{{ x.data.url}}">Link</a></td>
             <td>{{x.data.score}}</td>
         </tr>
     </table>
</li>

我正在传递所有参数，但只有 url 有效过滤器和 orderby 无效，有人可以纠正我吗？

【问题讨论】：

我猜你的 tr 应该是这样的：<tr ng-repeat="x in names |filter:filter|orderBy:orderBy">。试试看。如果您可以准备 Plnkr，下次会更好，因此其他人可以直接在代码中进行调查。见http://plnkr.co -> 新 -> Angular 1.x
@ilmgb 它的工作，但怎么能做 asc 和 desc？
参见https://docs.angularjs.org/api/ng/filter/orderBy 的角度文档。它声明“表达式可以可选地以 + 或 - 为前缀来控制升序或降序排序顺序（例如，+name 或 -name）。如果没有提供属性（例如 '+'），则使用数组元素本身比较排序位置。”
不要忘记将答案标记为正确。谢谢。

标签： angularjs filter directive

【解决方案1】：

它与隔离范围无关。通常，您以正确的方式传递变量 - 通过=-notation 从控制器到指令。

您忘记将 orderBy 传递给指令，以及了解过滤器和 orderBy 通常是如何工作的。请查看filter 和orderBy 的文档并查看示例。

更正指令代码，现在将控制器的 orderBy 范围变量传递到指令中。

<div my-data remoteurl='url' filter='test' order-by="orderBy">
</div>

正如我已经评论过的，您的表格行代码应如下所示：

<tr ng-repeat="x in names | filter:filter | orderBy:orderBy">

在控制器中，我设置了以下过滤器和 orderBy 字符串。

$scope.filter= 'obama';
$scope.orderBy= '-data.score'; //the "-" stands for reverse ordering

当您定义像 filter:test 这样的过滤器时，过滤器基于一个名为 test 的范围变量，例如$scope.test。在您的范围内，过滤器位于范围变量 $scope.filter 内，因此您的过滤器的正确调用是 filter:filter。

我在这里设置了一个工作 plnkr：http://plnkr.co/edit/FGZVaPrvbUcdvNRnKMk4?p=preview

【讨论】：