Javascript 角度：如何制作“a”；搜索“；带您到另一条路线并显示结果？

我有一个带有导航的主页，每个导航选项都会将您带到另一条路线。它看起来就像一个单页应用程序，但每个“页面”都有自己的路由和控制器

我的问题是我想在导航栏中放置一个搜索框。当有人使用搜索框时，我希望将用户带到“搜索”路径，然后显示结果。我很难弄清楚这两个问题：

我在哪里存储这个“搜索框”逻辑？例如，当有人搜索时，他们从下拉列表中选择搜索类型，然后在输入框中选择搜索查询。我有特殊的逻辑根据输入框中键入的值自动选择哪个下拉值

如何重定向到 “搜索”路线并根据来自的输入显示结果 上一页

---

很明显我是一个新手。我很高兴能解决细节问题，但我主要想了解如何构建这个问题的解决方案。提前感谢您的帮助。

我最喜欢的是您可以应用的选项数量

您的目标可以通过使用服务来实现。服务是可以从控制器请求的单例类。作为一个单身者，您在服务中存储的任何值都可供所有控制器使用。您可以使用$watch查看值更改、使用$broadcast通知数据更改或使用$routeParams发送带有路由更改的数据

服务的构建如下所示：

下面假设您有一个名为“app”的全局模块变量

app.service('myService', function(){

     var myValue;

     this.getMyValue = function(){
        return myValue;
     };           

     this.setMyValue = function(value){
        myValue = value;
     };
});

然后，像请求$scope这样的角度服务一样，从控制器请求服务

app.controller('myController', ['$scope', 'myServce', function($scope, myService){

    $scope.myValue = myService.getMyValue();

    //Example watch
    $scope.$watch('myValue',function(){
       //Search criteria changed!!
    }, true);

}]);

---

Angular非常棒。享受编码乐趣基本上你希望搜索页面有自己的状态，所以我们从这里开始（我希望你使用ui路由器，而不是Angulars内置路由器）：

如您所见，我为搜索字符串定义了一个附加参数，该参数不是URL的一部分。当然，如果愿意，您可以更改该参数，并将参数移到URL：

.state('search', {
    url: "/search/:searchString",
    templateUrl: "pages/search.html",
    controller: 'SearchController as ctrl'
})

实际的搜索输入也非常简单，因为它只是HTML：

<input type="text" ng-model="searchString" on-key-enter="ctrl.goSearch(searchString)">

有趣的是我添加的on-key-enter指令：

angular.module('your.module')
    .directive('onKeyEnter', OnKeyEnter);

function OnKeyEnter() {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.onKeyEnter);
                });
                event.preventDefault();
            }
        });
    };
}

按enter键时，它将调用作为属性值提供的函数。当然，您也可以使用带有ng click的按钮来代替此指令，但我认为它看起来更好

最后，但并非最不重要的是，您需要一个搜索控制器和一个用于搜索页面的HTML模板，我不会提供给您，因为这里显示的内容取决于您。对于控制器，您只需要知道如何访问搜索字符串：

angular.module('your.module')
    .controller('SearchController', SearchController);

SearchController.$inject = ['$scope', '$stateParams'];

function SearchController($scope, $stateParams) {
    $scope.searchString = $stateParams.searchString;

    /* DO THE SEARCH LOGIC, e.g. database lookup */
}

---

希望这有助于找到正确的方法。：）

你有两个相当大的问题挤在一个问题里；就他们自己而言，这些问题中的每一个都是博客或教程中的完整主题；总之，这个问题太广泛，无法充分处理，这意味着如果你收到任何答案，他们几乎不会触及任何有用的东西的表面。从非常广泛的意义上说，这听起来像是一个指令的候选者，以及显示结果的独特路线/页面。谢谢克莱斯，我没有意识到

angular.module('your.module')
    .directive('onKeyEnter', OnKeyEnter);

function OnKeyEnter() {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.onKeyEnter);
                });
                event.preventDefault();
            }
        });
    };
}

angular.module('your.module')
    .controller('SearchController', SearchController);

SearchController.$inject = ['$scope', '$stateParams'];

function SearchController($scope, $stateParams) {
    $scope.searchString = $stateParams.searchString;

    /* DO THE SEARCH LOGIC, e.g. database lookup */
}