AngularJS 需要 2 次点击来执行搜索操作

Question

我是 AngularJs 新手:)。 但我有 3 个组件：控制器 C1（用于输入搜索输入并单击提交按钮）、控制器 C2（用于从 SearchService 接收结果并显示它的 div）和用于发送一些硬编码结果的服务 searchService。

想法是提交搜索文本后，我必须提交两次。只需单击一次提交，ui-router 的视图就会更新为部分页面，而无需加载结果。第二次点击后会显示结果。

然后在搜索视图页面上进行下一步搜索，一切正常，一键提供所需数据。

如何解决：我想一键更改ui-router视图并从服务中获取结果？

C1方法代码（提交searchText后启动）

$scope.searchText = function searchText(text) {
    $log.log("Method searchText with text: " + text);        
    //var parametersObject = {searchText: text, results: assetResults}

    $state.go('search');        
    $log.log("SearchInputBoxController: rootScope Broadcasting message: " + text);        

    $rootScope.$broadcast('DoSearch', text);                    

    $log.log("SearchInputBoxController finished");
};   

C2 方法：事件“DoSearch”的事件处理程序

 $scope.$on('DoSearch', function (event, data) {        
    $scope.asset = searchService.search(data);
    $scope.searchText = data;            
 });

搜索服务代码：

Application.Services.factory('SearchService', ['SearchServiceResource', '$q',
    function (SearchServiceResource, $q) {
        return {
            search : function (searchText)
            {            
                var result = [
                    {id: 'aaaaa', sn:"1234-1234-1234-1235", name:"DCU_name1", type: "DCU", tags: ["tag1", "tag2"]},
                    {id: 'aaaaa', sn:"1234-1234-1234-1235", name:"DCU_name2", type: "DCU", tags: ["tag1", "tag2"]},
                    {id: 'aaaaa', sn:"1234-1234-1234-1235", name:"NODE_name1", type: "DCU_Node", tags: ["tag1", "tag2"]}                        
                ];
                return result;
            }
        };
}]);   

Answer 1

相信点击两次是因为第一次点击触发状态改变，然后广播发生，然后状态改变发生。第二次点击，状态不需要改变，当前现在没有变化的控制器得到广播。我可以想到几种不同的方法（我会避开 rootscope 广播）：

1. 在您的共享服务中，维护一个搜索字符串变量并在您的 控制器，监视该服务的变量。

2. 更改您的路由/状态设置以包含 /search/:searchTerm 之类的参数，并在控制器中查找状态建立的 searchTerm 变量，并在控制器加载时查看是否提供了 searchTerm 并触发搜索。 Some more info here

如果您需要任何帮助或关于所列想法的更多细节，请立即联系我。