Question

我有一个主页面，包括两个路径页面（使用ngRoute）page1和page2以及单独的子控制器。主页面上有一个搜索栏。

假设我现在正在page1，通过提交搜索栏表单，我想将路径更改为page2并将字符串作为参数传递，然后执行{{{{ 1}}传入的参数。

下面是我的代码，我正在使用controller2来传递参数，但除非我设置了1000毫秒的延迟，否则不会执行该函数。我的问题是如何在路由加载后将路由更改为page2并触发$broadcast？

html（主页）：

$on

路线：

<div ng-controller="mainController">

 //form
 <form ng-submit="search()">
  <input type="text" ng-model="searchText"></input>
 <button type="submit">
 </form>

 //route
<div ng-view></div>

<div>

主控制器：

     $routeProvider
        .when('/page1', {
            templateUrl: 'page1.html',
            controller: 'controller1',
        })
        .when('/page2', {
            templateUrl: 'page2.html',
            controller: 'controller2'
        })

控制器2：

    $scope.search = function() {
        $location.path('/page2');
        $timeout(function() {
            $scope.$broadcast('search', $scope.searchText);
        }, 1)
    }

Answer 1

在网址重定向中包含搜索文字：

$scope.search = function () {
    $location.path('/page2/').search({ search: $scope.searchText });
};

然后在您的控制器中，您可以通过$ route服务访问查询字符串参数：

yourapp.controller('controller2', ['$scope', '$route', function ($scope, $route) {
    $scope.filterData($route.current.params.search);
}]);

您还可以使用resolve在路径中预加载数据。这意味着路由在实例化控制器之前等待任何承诺解析，因此当您的控制器加载时，数据已经被提取并且可以被过滤。

 $routeProvider
        .when('/page1', {
            templateUrl: 'page1.html',
            controller: 'controller1',
        })
        .when('/page2', {
            templateUrl: 'page2.html',
            controller: 'controller2',
            resolve: [function(){
                return $http....
            }]
        })

理想情况下，解析应该调用控制器使用的相同服务，以便可以缓存数据。

    resolve: ['SearchService', function(SearchService){
        return SearchService.fetchContent()
    }]
...
    yourapp.controller('controller2', ['$scope', '$route', 'SearchService', function ($scope, $route, SearchService) {

Answer 2

您应该使用路由参数在路由之间传递信息，而不是使用$broadcast。实现此目的的一种方法可能如下所示：

路线：

.when('/page2/:search', {
...
}

导航：

//navigate to `/page2/search
$location.path('/page2/'+$scope.searchText);

在controller2中：

controller('controller2', function($scope, $routeParams) {
  $scope.searchedText = $routeParams.search;
}

角度文档here中的完整信息和示例。

Angular - 如何将路由更改为特定页面并传递params，然后在路由加载后使用params执行函数？

2 个答案: