Question

我正在我正在处理的应用程序中实现高级搜索。在此搜索中，我希望浏览器中的后退和下一个按钮与搜索一起使用。

为实现这一点，我将其添加到我的$ routeProvider：

.when('/search', {
    templateUrl: 'Scripts/App/Views/Search.html',
    controller: 'SearchController',
    reloadOnSearch: false
})

在我的SearchController中，我在$ scope上有一个搜索函数，只是将一些查询字符串参数添加到我的网址：

$scope.advancedSearch = function(){
    $location.search("page", $scope.currentPage);
    $location.search("groupingField", $scope.groupingField);
    $location.search("topgroup", angular.toJson($scope.filter));
}

我听$ routeUpdate，获取查询字符串参数并使用这些参数执行搜索。

$scope.$on('$routeUpdate', function () {
    var qs = $location.search();
    var topGroup = qs["topgroup"];
    $scope.filter = angular.fromJson(topGroup);
    $scope.groupingField = qs["groupingField"];
    $scope.currentPage = qs["page"];
    performSearch();
});

在我的真实搜索方法中，我检查表单是否有错误。如果有任何我显示消息，我执行搜索（执行api调用）。

var performSearch = function () {
    if ($scope.searchForm.$invalid) {
        $scope.message = "Please fix the errors before you search.";
    } else {
        //get search results from database and put them on $scope.
    }
}

使用此代码，我可以搜索并获得正确的结果。如果我进行新的搜索，它也会获得正确的结果，我可以使用浏览器中的后退和下一个按钮。

当我进行搜索并且我的表单无效时，该消息会显示，但是当我在无效搜索后返回时，表单的$ invalid会在我的＆＃34; performSearch＆＃34;之后更新。方法被调用。这导致＆＃34;请在搜索之前修复错误。＆＃34;即使表单是$ valid也要显示的消息。

如果我在此之后单击下一个按钮，我会遇到更多麻烦，因为表单现在是$有效但填充了查询字符串参数应该是$ invalid。同样，这只在调用performSearch后才更新。这是迟到的。

可能很难理解我的问题，如果有什么不明确的问题就可以了！

Answer 1

找到答案！在$ routeupdate上，我等待一个摘要周期来完成并更新表单属性。这可以在没有时间的情况下使用$ timeout完成。

$scope.$on('$routeUpdate', function () {
    var qs = $location.search();
    var topGroup = qs["topgroup"];
    $scope.filter = angular.fromJson(topGroup);
    $scope.groupingField = qs["groupingField"];
    $scope.currentPage = qs["page"];
    $timeout(function () {
        performSearch();
    });
});

Angular形式$ invalid和$ routeUpdate

1 个答案: