Angular 监听路由变化事件

摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on(‘$stateChangeStart‘, function(event, toState, toParams, fromState, fromParams){ ... })

app.run([‘$rootScope‘, ‘$location‘ ,‘$cookieStore‘, ‘$state‘, ‘CacheManager‘,  function($rootScope, $location, $cookieStore, $state,CacheManager){
//监听路由事件

        $rootScope.$on(‘$stateChangeStart‘,

            function(event, toState, toParams, fromState, fromParams){

                if(toState.name=="tabs.post"&&fromState.name=="tabs.orderList"){

                     //$location.path();//获取路由地址

                    $location.path(‘/tabs/home‘);//设置路由地址

                }

        })

}]);

ps:

使用event.preventDefault()可以阻止模板解析的发生

 $rootScope.$on(‘$stateChangeStart‘,

            function(event, toState, toParams, fromState, fromParams){

                event.preventDefault();

        })
$stateChangeSuccess- 当模板解析完成后触发

$stateChangeError- 当模板解析过程中发生错误时触发

$viewContentLoading- 当视图开始加载,DOM渲染完成之前触发,该事件将在$scope链上广播此事件

$viewContentLoaded- 当视图加载完成,DOM渲染完成之后触发,视图所在的$scope发出该事件。

  

参考原文:https://my.oschina.net/jack088/blog/479466

  

  

时间: 2024-11-05 14:54:41

Angular 监听路由变化事件的相关文章

Angular 监听路由变化

var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { co

mint ui的tabBar监听路由变化实现tabBar切换

说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应的tabBar高亮显示,而mint ui就不能,要加点代码实现了. mint ui tabBar标签栏 //页面 和 数据 <template> <div id="main"> <mt-tabbar v-model="selected"&g

react-router搭配react-redux无法监听路由变化的问题

在react中,要将react组件连接到redux中,通常会这样包装组件 class Home extends Component { } function select(state) { return { logBox:state.logBox } } export default connect(select)(Home) 但是当搭配react-router的时候,在进行路由跳转的时候,组件不会重新render.这个时候看react-redux的connect方法的说明: connect([

React监听窗口变化事件

功能说明:本例子采用MUI table组件 + React实现. 需求描述:固定表头,列表高度随浏览器窗口的改变而改变.(本例中当窗口高度小于472像素后,便不作限制) 实现简介:1.监听浏览器窗口,每当窗口大小发生改变,给列表高度重新复制: 2. 列表高度通过state来管理. 关键代码: 窗口监听事件管理: 列表高度处理函数: 组件里的设置: 效果图(关键项涂了马赛克...) 窗口高于472px: 窗口高度低于472px(列表边上的滚动条不见了,取而代之的浏览器窗口的滚动条,木有截下来)

vue 监听路由变化

方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,当路由发生变化的时候执行 watch: { '$route':'getPath

vue页面内监听路由变化

beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当钩子执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组

jq监听input-val变化事件

$('body').on('input propertychange', '.info-number-val-box', function(event) { xxxxx });

Angular.JS中使用$watch监听模型变化

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

ionic 监听路由事件 验证登录

.run(['$rootScope', '$location' , '$state', '$http','$ionicPopup', function($rootScope, $location, $state,$http,$ionicPopup){ var loginname=['tab.member','loan','repayment','iftab.exe']; $http.jsonp(apiurl+"/home/appapi/isLogin?callback=JSON_CALLBACK