0

我在一个 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 中时，但当我将搜索框放在顶视图中时它不起作用。

4

1 回答 1

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

于 2015-12-28T15:53:33.877 回答