我正在构建一个应用程序,我想在用户进入和离开路由的时刻切换服务中的属性.为了做到这一点,我需要知道onEnter和onExit钩子的状态名.这对于onExit钩子来说比较容易,因为我只需要注入$state服务并读取当前状态的名称.但是由于当调用onEnter钩子时尚未设置当前状态,因此无法知道我们正在转换的状态.
我仍然需要对状态的其他部分进行精细控制,所以我宁可没有任何循环.我正在寻找一种能够将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',onEnter: onEnterFactory('step1')
});
使用onEnter onExit钩子. 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',onExit: onExit
});
以下是在onEnter和onExit钩子中访问状态名称的工作示例：
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>',onExit: onExit
}).state('state-2',{
url: '/state-2',template: '<p>State 2</p>',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>