阳光博文 你的空间 知识的容器

AngularJS中locationchange、routechange事件

假设有这样一场景:在用户切换到另外一个route时,需要检查当前表单(内容)是否已保存?考虑下在AngularJS中如何实现?


我们首先来分析下,场景中有那些事件流。

①:用户编辑了表单

②:用户准备点击另外一个route url,触发提示‘是否要保存’

③:点击‘是’,route切换事件停止;点击‘否’,route切换事件继续


主要流程就这些其实很简单。这里主要涉及到了AngularJS中的事件处理模块。


首先我们需要知道的是$locationChangeStart和$routeChangeStart哪个事件先触发。

route是监控location.url的,然后采取操作的。所以事件的触发应该是先location后route事件

var app = angular.module('myApp', ['ngRoute']);

//
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/view1', {
        templateUrl: 'view1.html'
    }).when('/view2', {
            templateUrl: 'view2.html'
        }).otherwise({redirectTo: '/view1'});
}]);

app.run(['$rootScope', '$window', '$location', '$log', function ($rootScope, $window, $location, $log) {
    var locationChangeStartOff = $rootScope.$on('$locationChangeStart', locationChangeStart);
    var locationChangeSuccessOff = $rootScope.$on('$locationChangeSuccess', locationChangeSuccess);

    var routeChangeStartOff = $rootScope.$on('$routeChangeStart', routeChangeStart);
    var routeChangeSuccessOff = $rootScope.$on('$routeChangeSuccess', routeChangeSuccess);

    function locationChangeStart(event) {
        $log.log('locationChangeStart');
        $log.log(arguments);
    }

    function locationChangeSuccess(event) {
        $log.log('locationChangeSuccess');
        $log.log(arguments);
    }

    function routeChangeStart(event) {
        $log.log('routeChangeStart');
        $log.log(arguments);
    }

    function routeChangeSuccess(event) {
        $log.log('routeChangeSuccess');
        $log.log(arguments);
    }
}]);


运行结果:


这个其实框架原型已经出现了


我们只需要处理 locationChangeStart,这里给出部分实现:

[javascript] 
  1. function locationChangeStart(event, newUrl) {  
  2.         $log.log('locationChangeStart');  
  3.         $log.log(arguments);  
  4.   
  5.         var ret = $window.confirm('Are you sure to give it up? ');  
  6.         if (ret) {  
  7.             locationChangeStartOff(); //Stop listening for location changes or you can do others  
  8.             $location.path(newUrl);  
  9.             return;  
  10.         }  
  11.         event.preventDefault();  
  12.         return;  
  13.     }  


好的,我们来总结下:

我们利用location改变事件来实现了在提交Location之前做了定制化,除了location事件,还有route事件,利用route事件我们可以做‘loading..’效果。






在线咨询