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，并且TopController中$ 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

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

1 个答案: