在全球的角度搜索框 [英] Global search box in angular
问题描述
我要实现改变基于正在使用任何控制器上什么搜索一个搜索框。如果你在上岗，可以查看它会搜索职位API，如果你是在视频来看，它搜索视频API。这似乎在搜索框中可能会需要它自己的控制器。我是pretty知道我需要注入的搜索服务为所有型号的控制器，但我不完全知道如何去改变它搜索URL或领带输入到不同的控制器范围。
I want to implement a search box that changes what it searches based on whichever controller is being used. If you are on the "posts" view it will search the posts api, if you are on the videos view, it searches the videos api. It seems the search box would need its own controller maybe. I'm pretty sure I need to inject a search service into all the model controllers but I'm not exactly sure how to change the url it searches or tie the input to the different controller scopes.
因此，任何想法如何有改变的地方它搜索基于哪个控制器是利用它，并捆绑其状态返回到不断变化的观点进行全局搜索框？
So any ideas how to have a global search box that changes where it searches based on whichever controller is making use of it and tying its state back into a changing view?
推荐答案
要进行资源的动态调用API的我会首先创建一个映射到两个端点，帖子和视频2 $资源。然后把一个NG-change事件上的调用在你的基地的一个功能全局搜索。
To make a resource call dynamic api i would first create two $resources that map to your two endpoints, posts and videos. Then put an ng-change event on your global search that calls a function in your base controller.
此功能首创需要搞清楚搜索的内容的API。然后做出相应的API调用。最重要的部分是在回调，我认为这是你在找什么。
在回调，你可以$直播从您的API查询RESP数据。您的每一个控制器将侦听与功能的$的事件。然后，听众将填充回调数据的正确范围的变量。
This function firsts need to figure out what api to search. Then make the appropriate api call. The important part is in the callback and i think this is what you are looking for. In the callback you could $broadcast the resp data from your api query. Each of your controllers will be listening for an event with an $on function. The listeners will then populate the correct scope variable with the callback data.
下面伪。
相同的HTML布局NG-变化
Same html layout with ng-change
<html>
<body ng-controller="AppController">
<form>
<label>Search</label>
<input ng-model="global.search" ng-change="apiSearch()" type="text" class="form-control" />
</form>
<div ui-view="posts">
<div ng-controller="PostController">
<p ng-repeat="post in posts | filter: global.search">{{ post.name }}</p>
</div>
</div>
<div ui-view="videos">
<div ng-controller="VideoController">
<p ng-repeat="video in videos | filter: global.search">{{ video.name }}</p>
</div>
</div>
</body>
</html>
AppController的
AppController
.controller('AppController', function ($scope, PostService, VideoService) {
$scope.apiSearch = function() {
// Determine what service to use. Could look at the current url. Could set value on scope
// every time a controller is hit to know what your current controller is. If you need
// help with this part let me know.
var service = VideoService, eventName = 'video';
if ($rootScope.currentController == 'PostController') {
service = PostService;
eventName = 'post';
}
// Make call to service, service is either PostService or VideoService, based on your logic above.
// This is pseudo, i dont know what your call needs to look like.
service.query({query: $scope.global.search}, function(resp) {
// this is the callback you need to $broadcast the data to the child controllers
$scope.$broadcast(eventName, resp);
});
}
})
每个孩子控制器，显示的结果。
Each of your child controllers that display the results.
.controller('PostController', function($scope) {
// anytime an event is broadcasted with "post" as the key, $scope.posts will be populated with the
// callback response from your search api.
$scope.$on('post', function(event, data) {
$scope.posts = data;
});
})
.controller('VideoController', function($scope) {
$scope.$on('video', function(event, data) {
$scope.videos = data;
});
})
这篇关于在全球的角度搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
