Мгновенный поиск между различными видами AngularJs

Question

я использую UI-маршрутизатор в одном AngularJs проекта

У меня есть две точки зрения, как это:

.state('index', { 
      url: '/', 
      views: { 
       '@' : { 
       templateUrl: 'layout.html' 
       }, 
       'top@index' : { templateUrl: 'partials/layout/top.html'}, 
       'main@index' : { templateUrl: 'partials/layout/main.html'} 
      } 
     }) 

Лучшие и основной.

Вид сверху - поиск входных данных, основной вид - результаты, которые должны отображаться, фильтрация ng-repeat или что-то еще.

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

Это происходит, когда я помещаю окно поиска в index.html, но это не работает, когда я помещаю окно поиска в вид сверху.

Answer 1

Используйте комбинацию $rootScope.$broadcast и $scope.$on. В основном вы можете поместить $ scope. $ On в разных точках зрения, и все области, подписанные на событие, выполняемое $ rootScope в , могут прослушивать событие.

В верхнем контроллере:

angular 
    .module('exampleApp') 
    .controller('TopController', TopController); 

    TopController.$inject = ['$rootScope']; 

    function TopController($rootScope){ 
     var vm = this; 

     vm.search = function(textSearch) { 
      $rootScope.$broadcast('top:search', textSearch); 
     } 

    } 

В главном контроллере:

$scope.$on('top:search', function(event, searchInput){ 
      console.log(searchInput); 
     }); 

Проверьте это: http://codepen.io/gpincheiraa/pen/eJzQpE