angularjs - 在其 `onEnter` 钩子(Hook)中获取状态的名称

Question

我正在构建一个应用程序，我想在用户进入和离开路线的那一刻切换服务中的属性。为此，我需要了解 onEnter 中的州名。和 onExit钩子(Hook)。这对于 onExit 来说相对容易。钩子(Hook)，因为我可以注入(inject) $state服务并读取当前状态的名称。但是由于当前状态尚未设置，当 onEnter钩子(Hook)被称为没有办法知道我们正在转换到什么状态。

我仍然需要很好地控制该州的其他部分，所以我宁愿没有任何 for 循环。我正在寻找一种能够通过 onEnter 的方法函数到状态，同时仍然在函数本身内部检索状态的名称。

这是我写的代码:

function onEnter($state, Steps) {
  var stateName = $state.current.name; // Not possible. The current state has not been set yet! 
  var step = Steps.getByStateName(stateName);

  step.activate();
}

function onExit($state, Steps) {
  var stateName = $state.current.name; // No problem. We know about the state. 
  var step = Steps.getByStateName(stateName);

  step.deactivate();
}

$stateProvider
  .state('step1', {
    url: '/step1',
    templateUrl: 'templates/step1.html',
    controller: 'StepOneController',
    onEnter: onEnter,
    onExit: onExit
  });

我现在使用的解决方案是使用工厂为 onEnter 创建上下文。函数传递给状态。这远非理想，因为我仍然需要将州名传递给它。

这是所述解决方法的示例:

function onEnterFactory(stateName) {
  return function onEnter(Steps) {
    var step = Steps.getByStateName(stateName);

    step.activate();
  }
}

$stateProvider
  .state('step1', {
    url: '/step1',
    templateUrl: 'templates/step1.html',
    controller: 'StepOneController',
    onEnter: onEnterFactory('step1')
  });

Answer 1

使用这个在 onEnter onExit 钩子(Hook)中。 onEnter 通过以下命令调用:

$injector.invoke(entering.self.onEnter, entering.self, entering.locals.globals);

$injector.invoke 的第二个参数是 的值这个对于它调用的函数。因此，您的代码应如下所示:

function onEnter(Steps) {
  var stateName = this.name; 
  var step = Steps.getByStateName(stateName);

  step.activate();
}

function onExit(Steps) {
  var stateName = this.name;
  var step = Steps.getByStateName(stateName);

  step.deactivate();
}

$stateProvider
  .state('step1', {
    url: '/step1',
    templateUrl: 'templates/step1.html',
    controller: 'StepOneController',
    onEnter: onEnter,
    onExit: onExit
  });

这是访问 onEnter 中的州名的工作示例。和 onExit钩子(Hook):

angular.module('myApp', ['ui.router'])

.config(function($stateProvider) {
  function onEnter() {
    console.log('Entering state', this.name);
  }

  function onExit() {
    console.log('Exiting state', this.name);
  }

  $stateProvider.state('state-1', {
    url: '/state-1',
    template: '<p>State 1</p>',
    onEnter: onEnter,
    onExit: onExit
  }).state('state-2', {
    url: '/state-2',
    template: '<p>State 2</p>',
    onEnter: onEnter,
    onExit: onExit
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>

<div ng-app="myApp">
  <nav>
    <a ui-sref="state-1">State 1</a>
    <a ui-sref="state-2">State 2</a>
  </nav>

  <div ui-view></div>
</div>