Question

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

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

还有其他一些东西。在一个separte 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-repeat填充的所有内容，然后我想通过在搜索栏中输入来过滤内容。当搜索条形码与内容位于同一位置时，这确实有效。如何全局更新“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;
  }

AngularJS Filter表达式未更新

1 个答案: