AngularJS Filter expression not updating

Question

我正在处理两个HTML文件和一个控制器。在一个HTML文件中，我有一个搜索栏：

<a ui-sref="allSubmissions"> 
    <input id="searchBar" ng-controller="submissions" ng-model="searchString" class="searchBar" type="text" placeholder="Search"> 
</a> 

随着其他一些东西。在部分HTML文件中，我列出了使用ng-repeat填充的提交列表：

<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 = ''; 

当我在搜索栏中单击，就带我到新的页面，显示了NG-重复填充的所有内容，那么我想通过在搜索栏中输入来过滤内容。当我将搜索条码与内容放在同一位置时，这起作用。如何全局更新“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; 
    }