Question

我想实现一个搜索框，根据正在使用的控制器更改搜索内容。如果您在“帖子”视图中，它将搜索帖子api，如果您在视频视图中，则会搜索视频api。似乎搜索框可能需要自己的控制器。我很确定我需要在所有模型控制器中注入搜索服务，但我不确定如何更改它搜索的URL或将输入绑定到不同的控制器范围。

那么任何想法如何让一个全局搜索框根据哪个控制器正在使用它来改变搜索位置并将其状态重新置于不断变化的视图中？

Answer 1

要进行资源调用动态API，我首先会创建两个映射到两个端点，帖子和视频的$资源。然后在全局搜索上放置一个ng-change事件，该事件调用基本控制器中的函数。

此功能首先需要弄清楚要搜索的api。然后进行适当的api调用。重要的部分是回调，我认为这正是你要找的。在回调中，您可以从api查询中广播resp数据。您的每个控制器都将使用$ on函数监听事件。然后，侦听器将使用回调数据填充正确的范围变量。

Pseudo below。

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

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


    }

})

显示结果的每个子控制器。

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

})

Answer 2

客户端过滤。

如果你没有寻找任何可以通过超级简单的方式进行全球搜索而疯狂的事情。我甚至都不知道这是否会起作用所以我只是做了一个快速测试而且确实如此。显然，这可以使用服务以更加详细和受控的方式解决，并在需要的地方注入它们。但由于我不知道你在寻找什么，我会提供这个解决方案，如果你喜欢它，那就接受吧。如果你不这样做，我可能会帮助你解决服务注入问题

快速解决方案是使用$ rootScope ng-model建立一个app wide contoller。让我们称之为global.search。

    $rootScope.global = {
        search: ''
    };

适用于应用范围的搜索输入。

<form>
    <label>Search</label>
    <input ng-model="global.search" type="text" class="form-control" />
</form>

在单独的部分中，您只需要根据global.search ng-model过滤数据。两个例子

<p ng-repeat="post in posts | filter: global.search">{{ post.name }}</p>

具有不同范围的第二个模板

<p ng-repeat="video in videos | filter: global.search">{{ video.name }}</p>

注意他们如何实现| filter：global.search。每当global.search更改时，当前视图中的任何过滤器都将更改。因此，帖子将在帖子视图和视频视频上进行过滤。虽然仍然使用相同的global.search ng-model。

我测试了它，它确实有用。如果您需要更多详细解释设置和子控制器层次结构，请告诉我。以下是完整模板的快速浏览

<html>

<body ng-controller="AppController">
    <form>
        <label>Search</label>
        <input ng-model="global.search" 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>

角度全局搜索框

2 个答案: