如何使用$ transition？

Question

目前,我正在使用:

• "angular-ui-router":"^ 0.4.2"
• "棱角分明":"^ 1.6.3"
• "webpack":"^ 2.4.1"

我知道我当前的实现可能已被弃用,只是寻找新方法的实现(示例或文档).非常感谢任何帮助,提前感谢!

目前的实施:

'use strict';

module.exports = angular
  .module('common', [
    'ui.router',
    'angular-loading-bar',
    require('./header').name,
    require('./sideBar').name,
    require('./footer').name
  ])
  .run(function($transitions, cfpLoadingBar) {
    $transitions.onStart({}, cfpLoadingBar.start);
    $transitions.onSuccess({}, cfpLoadingBar.complete);
  });

当前错误:

未捕获错误:[$ injector:unpr]未知提供者:$ transitionsProvider < - $ transitions

Answer 1

在新版本(> = 1.0.0)中,$ state更改事件已弃用,现在您必须使用$transitions而不是...

新版本的$过渡(> = 1.0.0)(PLUNKER DEMO)

MyCtrl.$inject = ['$transitions'];

function MyCtrl($transitions) {
    $transitions.onSuccess({}, function($transition){
        console.log($transition.$from());
        console.log($transition.$to());
        console.log($transition.params());
    });
}

通过调用排序的可用事件:

$transitions.onStart({}, function($transition){...});

$transitions.onExit({exiting: "stateName"}, function($transition){...});

$transitions.onRetain({}, function($transition){...});

$transitions.onEnter({entering: "stateName"}, function($transition){...});

$transitions.onFinish({}, function($transition){...});

$transitions.onSuccess({}, function($transition){...});

详细了解每个事件方法:$ transition service docs
还有一些例子:官方文档中0.4.2到1.0.0的迁移示例

$ state更改旧版本的事件(<= 0.4.2)(PLUNKER DEMO):

MyCtrl.$inject = ['$scope'];

function MyCtrl($scope) {
    $scope.$on('$stateChangeStart', 
        function(event, toState, toParams, fromState, fromParams, options) {...});

    $scope.$on('$stateChangeSuccess', 
        function(event, toState, toParams, fromState, fromParams, options){...});
}

检查angular-ui-router文档以获取更多$ state change事件