Как использовать фильтр и orderby с изолированной директивой?

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

Это не имеет никакого отношения к изолированному пространству. В общем, вы передаете переменные правильным образом - от контроллера в директиве через = -нотацию.

Вы забыли передать заказ в соответствии с директивой, а также понять, как фильтры и порядок в целом работают. Пожалуйста, ознакомьтесь с документацией для filter и 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 фильтр основан на переменной области видимости называется тест, например, $scope.test. В вашей области действия фильтр находится внутри переменной области $scope.filter, поэтому правильный вызов вашего фильтра - filter:filter.

Я создал рабочую plnkr здесь: http://plnkr.co/edit/FGZVaPrvbUcdvNRnKMk4?p=preview