gpt4 book ai didi

search - Angular 全局搜索框

转载 作者:行者123 更新时间:2023-12-03 07:03:10 24 4
gpt4 key购买 nike

我想实现一个搜索框,它可以根据所使用的 Controller 来更改搜索内容。如果您在“帖子” View 中,它将搜索帖子 api,如果您在视频 View 中,它将搜索视频 api。看来搜索框可能需要自己的 Controller 。我很确定我需要将搜索服务注入(inject)到所有模型 Controller 中,但我不太确定如何更改它搜索的 url 或将输入绑定(bind)到不同的 Controller 范围。

那么有什么想法如何拥有一个全局搜索框,根据使用它的 Controller 来更改搜索位置并将其状态重新绑定(bind)到不断变化的 View 中?

最佳答案

要进行资源调用动态 api,我首先创建两个映射到您的两个端点(帖子和视频)的 $resources。然后在全局搜索上放置一个 ng-change 事件,该事件调用基本 Controller 中的函数。

这个函数首先需要弄清楚要搜索什么api。然后进行适当的 api 调用。重要的部分是回调,我认为这就是您正在寻找的。在回调中,您可以 $broadcast 来自 api 查询的 resp 数据。每个 Controller 都将使用 $on 函数监听事件。然后,监听器将使用回调数据填充正确的范围变量。

伪如下。

与 ng-change 相同的 html 布局

<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>

应用 Controller

.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);
});


}

})

显示结果的每个子 Controller 。

.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;
});

})

关于search - Angular 全局搜索框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18962865/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com