如何在angularjs中将filter转换为指令

angular.module('myApp', [])
  .directive('myFilter', function() {
    return {
      restrict: 'A',
      scope: {
        data: '=',
        filterBy: '='
      },
      link: function(scope, element, attrs) {
        scope.$watch('filterBy', function(newVal) {
          if (newVal) {
            scope.filteredData = scope.data.filter(function(item) {
              return item.name.toLowerCase().indexOf(newVal.toLowerCase()) !== -1;
            });
          } else {
            scope.filteredData = scope.data;
          }
        });
      },
      template: `
        <input type="text" ng-model="filterBy" placeholder="Filter">
        <ul>
          <li ng-repeat="item in filteredData">{{ item.name }}</li>
        </ul>
      `
    };
  });

<div ng-app="myApp">
  <div ng-controller="myController">
    <div my-filter data="items" filter-by="filterValue"></div>
  </div>
</div>

angular.module('myApp')
  .controller('myController', function($scope) {
    $scope.items = [
      { name: 'Apple' },
      { name: 'Banana' },
      { name: 'Orange' },
      { name: 'Pear' }
    ];
    $scope.filterValue = '';
  });