Question

这是我的ui-router配置：

$stateProvider
  .state('search.filter.results', {
    url: '/results?profileId&keywords',
    views: {
      'profiles@': {
        templateUrl: 'profile-list/profile-list.html',
        controller: 'ProfileListCtrl'
      },
      'profile-summary@search.filter.results': {
        templateUrl: 'profile-list/profile-summary/profile-summary.html'
      },
      'profile-details@search.filter.results': {
        templateUrl: 'profile-list/profile-details/profile-details.html',
        controller: 'ProfileDetailsCtrl'
      }
    }
  })

ProfileListCtrl有以下方法：

$scope.showProfileDetails = function(profileId) {
  $state.go('search.filter.results', { profileId: profileId });
};

问题是，当执行此方法时，将ProfileListCtrl实例化并重新加载视图。

我希望只有在keywords查询参数更改时才会重新加载，但在profileId参数更改时却不会。

实现这一目标的最佳方式是什么？

Answer 1

我建议：将这个状态分为两个州。

＆＃34;父母＆＃34; 保留profileId，
使用keywords的＆＃34;孩子＆＃34; 。

在profileId未更改之前，父控制器不会被重新实例化。

我用这个简化的状态定义创建了这个example：

.state('profile', {
    url: '/results/:profileId',
    views: {
      'profiles@': {
        //templateUrl: 'profile-list/profile-list.html',
        template: '<div>'
        ...
        '<div ui-view=""></div></div>',
        controller: 'ProfileCtrl'
      },
    }
  })
.state('profile.results', {
    url: '/?keywords',
    views: {
      '': {
        //templateUrl: 'profile-list/profile-list.html',
        template: ...
        controller: 'ProfileListCtrl'
      },
    }
  })

注意：此处的状态定义已简化，只显示拆分。不是所有的细节。此外，子状态目标父项未命名视图ui-view=""，因为这些应该嵌套。最后，父母甚至可以是抽象的

这种方法还需要对网址进行一些小的调整。如果儿童网址定义以?开头，那么效果不佳：url: '?keywords'。所以我使用了不同的模式：

/results/profileId-value/?kewords=abc

Angular UI Router：如何根据查询参数更改停止重新加载？

1 个答案: