angular.js - How to handle angular search function?

Question

Suppose I have two controllers, these two controllers are brothers
ListController ==> List controller
SearchController ==> Search controller

The

page is in 列表控制器 as soon as it comes up. After successfully requesting the data, it is mounted to $scope.data and then applied in the list view.

but I want to search now.

There are methods in

搜索控制器. Enter text and click Confirm to obtain the data returned by the server.

ok I have successfully obtained the data now, how do I apply the data to 列表控制器 to render the list view?

Answer 1

You can use angularjs broadcast, the key code is as follows
ListController

$scope.$on('SearchController.onSearch',function(e,data){
    console.log(data);
});

SearchController

//搜索方法请根据实例情况处理 ，这里只进行获得结果之后的处理
$scope.search = function(){
    var data = [];//搜索到的数据，如果是异步拿到的，请把以后的代码放到回调中
    $scope.$emit('SearchController.onSearch',data);
}

$rootScope top controller handling

$scope.$on('SearchController.onSearch',function(e,data){
    $scope.$broadcast('SearchController.onSearch',data)    
});

That’s it. The core is the use of broadcast

Answer 2

Write a service to save global data. When entering the list page, first determine whether the global data object has data. If there is no data, the original data will be displayed directly. If there is data, it means that the search has been completed, and the search data or other display methods you like will be displayed.

Answer 3

After clicking search, of course you need to re-request the data. Just re-assign the value to your $scope.data= and it will be ok