ui-router $ stateChangeState事件不能觸發

我想在routechange時加載動畫。爲什麼沒有在控制檯。

HTML

<body ng-app="app" ng-controller="ctrl"> 
<a ui-sref="home">home</a> 
<a ui-sref="route">route</a> 
<ui-view></ui-view> 
<script src="//cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script> 
<script src="//cdn.bootcss.com/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>

var app = angular.module('app',['ui.router']); 
    app.config(function($stateProvider,$urlRouterProvider){ 
     $urlRouterProvider.otherwise('/home'); 

     $stateProvider 
       .state('home',{ 
        url:'/home', 
        template:'<div>home</div>' 
       }) 
       .state('route',{ 
        url:'/route', 
        template:'<div>route</div>' 
       }) 
    }) 
    app.controller('ctrl',function($scope){ 

    }); 

    app.run(function($rootScope,$state){ 
     // $rootScope.$state = $state; 
     $rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){ 
      console.log(111);   //why cannot? 
      // load.onLoading();  //loading animate.. 
     }) 
    }); 
</script> 
</body>

我希望在routechange加載有生命的。爲什麼沒有在控制檯。

來源

2017-04-04 hahaha

從角UI路由器文檔：

State Change事件

注：狀態更改事件已被棄用，殘疾人和過渡鉤代替，1.0版（詳細信息）

並從遺留系統遷移到最新的角度路由器版本：

// Legacy example 
app.run(function($rootScope, $state) { 
    $rootScope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) { 
    // some code 
    }); 
}); 

// Migrate to: UI-Router 1.0 Transition Hook 
app.run(function($transitions) { 
    $transitions.onStart({ }, function(trans) { 
    // some code 
    }); 
});

來源here

來源

2017-04-04 14:26:03 user3632710

它更好地使用ng-animate模塊動畫頁面路線。你可以在這裏看到文檔。你也可以檢查這個教程。 Tutorial

來源

2017-04-04 14:23:48

爲什麼更好？ – Mistalis

用於角色方式的動畫處理，更好地使用角庫。你可以在這裏看到CSS技巧鏈接。 https://css-tricks.com/animations-the-angular-way/ –

哦，謝謝，我會嘗試它 – hahaha

ui-router $ stateChangeState事件不能觸發

回答

相關問題