如何将 filter 和 orderby 与 isolated 指令一起使用？

Question

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

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

})();

DataTable.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 不工作，有人能纠正我吗？

Answer 1

与隔离作用域无关。通常，您以正确的方式传递变量 - 通过 = 符号从控制器传递到指令。

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

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

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

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

<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

如何将 filter 和 orderby 与 isolated 指令一起使用？

how to use filter and orderby with isolated directive?

directive

filter

angularjs