不同视图之间的即时搜索 AngularJs

Question

我在一个 AngularJs 项目中使用 ui-router

我有两种看法：

.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 在 TopController 中执行的事件的范围都可以监听事件。

在顶部控制器中：

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

不同视图之间的即时搜索 AngularJs

Instant search between different views AngularJs

search

views

instant

angularjs