AngularJS Выражение фильтра не обновляется

Question

Я имею дело с двумя файлами HTML и одним контроллером. В одном файле HTML у меня есть панель поиска:

Наряду с некоторыми другими вещами. В separte HTML файл, у меня есть список представлений, которые я заселяю с нг-повторить:

<div class="container" ng-controller="submissions"> 
    <ul class="subsList"> 
     <ul> 
      <li ng-repeat="item in submissionCollectionTest | filter: searchString" class="submissionDivider hover"> 
       <span class="ageText">{{item.age}}</span> 
       <span class="submissionsText">{{item.submission}}</span> 
       <span class="descriptionText">{{item.description}}</span> 
      </li> 
     </ul> 
    </ul> 
</div> 

вместе с другим кодом. В моем полном приложении имеет смысл, что эти файлы являются отдельными, однако я не могу заставить вход поиска привязываться к выражению фильтра и автоматически обновлять. В мой контроллер, я имею следующую переменную Область применения:

myApp.controller('submissions',function($scope){ 


$scope.searchString = ''; 

Когда я нажимаю в строке поиска, он берет меня на новую страницу с шоу все содержимое населенную от нг-повтора, то я хочу фильтруйте контент, введя строку поиска. Это работает, когда у меня есть код поиска в том же месте, что и контент. Как я могу обновить «searchString» глобально, чтобы фильтр реагировал, когда он изменяется? Спасибо

Answer 1

Вы можете использовать трансляцию с одного контроллера и слушать в другом. Если вы используете несколько маршрутов, вам нужно сохранить поисковый запрос в службе.

Пример: https://jsfiddle.net/h0bd88dc/

function SearchSubmissionsCtrl($rootScope,Service) { 
    var vm = this; 
    vm.searchString = Service.searchString; 
    vm.search = search; 

    function search() { 
     Service.searchString = vm.searchString; 
     $rootScope.$broadcast('search', vm.searchString); 
    } 
    } 

    function SubmissionsCtrl($scope,Service) { 
    var vm = this; 
    vm.searchString = Service.searchString; 
    vm.items = [{ 
     age: 22, 
     submission: 'Yes', 
     description: 'Yo' 
    }, { 
     age: 5, 
     submission: 'Derp', 
     description: 'Hey' 
    }]; 

    $scope.$on('search', function(e, string) { 
     vm.searchString = string; 
    }) 
    } 

    function Service() { 
    var service = { 
     searchString: null 
    }; 

    return service; 
    }