Question

我有一个模块列表，右侧有模块详细信息。

div
  ul
    li(data-ng-repeat="module in modules")
      a(ng-href="{{getModuleHref(module)}}")
  div(ui-view)

模块列表和每个模块都有自己的状态。我希望父状态是可寻址的，因此没有摘要。

.state('modules', {
  url: '/',
  templateUrl: ..
})
.state('modules.input', {
  url: '/input',
  templateUrl: ..
})
...

在没有明确选择模块的情况下访问列表时，我想选择第一个失败的模块。（根据下载的数据重定向到另一个状态）

我尝试了几条没有成功的路径：

a）state.onEnter - 从子状态重定向时不会被触发（例如后退按钮或手动网址更改），而$state.current还不是目标状态（所以我不知道我们是不是＆＃ 39; t已处于子状态）

b）重定向$urlRouterProvider - 没有下载的数据，我无法下载（同步与异步）

c）全局$stateChangeSuccess处理..无法访问数据（即使它应该已经通过state.resolve下载） - 所以这个可能是以多次获取数据为代价来管理的。

所以我在控制器的构造函数中保留了更改状态，并在控制器中注册自定义$stateChangeSuccess以处理后退按钮/手动URL编辑。

function ModulesController($scope, apiService, $state, $rootScope) {
  var _this = this;
  this.scope = $scope;

  this.getInitialJobTraceDetail = function () {
    apiService.getModules(function (modules) {
      _this.scope.modules = modules;
      _this.setDefaultState();
    });
  };

  this.setDefaultState = function () {
    if (_this.$state.current.name != 'modules')
      return;
    var targetModule = _this.getFailedModule();
    _this.$state.go(targetModule);
  };

  this.setupModulesStateWatch = function () {
    _this.registerOnStateChangeEvent();
    _this.scope.$on("$destroy", function () {
      _this.unregisterOnStateChangeEvent();
    });
  };

  this.registerOnStateChangeEvent = function () {
    _this.unregisterOnStateChangeEvent = _this.$rootScope.$on('$stateChangeSuccess', function (event, toState) {
    if (toState.name == 'modules') {
      _this.setDefaultState();
    }
  });

  this.getInitialJobTraceDetail();
  this.setupJobDetailStateWatch();
}

编辑：但我认为应该有更好的解决方案。在控制器内部使用状态感觉不对 - 我的其他状态代码在全局单独的文件中。也许这就是问题，状态处理/定义应该与相应的组件一起使用？

ui-router - 基于数据的默认子状态

0 个答案: