美文网首页前端笔记本
Angularjs的页面跳转

Angularjs的页面跳转

作者: 大乔是个美少女 | 来源:发表于2017-08-23 18:56 被阅读491次

    今天,碰见从一个页面打开新的页面,保证原来页面的信息不丢失,新的页面上还要有原来页面上传过去的信息。
    为了解决这个问题,就看了一下Angular的页面跳转。

    跳转新页面

     $storage.mysql_user_conf = $scope.doc.conf.output.mysql
     __url = $state.href('applications-mysql-check', {basicType:8})
     window.open(__url, '_blank')
    

    页面切换及传值

    1、基于ui-router的页面跳转传参

    ## 方法一:
    state('producers', {
         url: '/producers',
         templateUrl: 'views/producers.html',
         controller: 'ProducersCtrl'
    })
    .state('producer', {
         url: '/producer/:Id',
         templateUrl: 'views/producer.html',
         controller: 'ProducerCtrl'
    })
    
    ## 方法二:
    .controller('ProducersCtrl', function ($scope, $state) {
            $scope.toProducer = function (producerId) {
                $state.go('producer', {producerId: Id});
            };
    });
    .controller('ProducerCtrl', function ($scope, $state, $stateParams) {
         var producerId = $stateParams.Id;
    });
    ## 在路由配置里要对传的参数设置为null
     $stateProvider
            .state('login', {
                url: "/login.html",
                templateUrl: "xxx/login.html",
                data: {pageTitle: '登陆'},
                params: {'test': null},
                controller: "xxxController",
            })
    

    2、基于factory的页面跳转传参

    MetronicApp.factory 'mysqlUserConfFactory', [ ->
        userServices = {}
        userconf = {}
    
        _set = (data) ->
            userconf = data
    
        _get =  ->
            return userconf
    
        userServices.setUserConf = _set
        userServices.getUserConf = _get
    
        return userServices
    #把对应的factory注入到相应的controller里,用userServices的方法获取全局的数值。
    

    3、基于localStorage或sessionStorage的页面跳转传参

    $scope.$storage = $localStorage.$default({
        counter: 0
    });
    counterFactory.updateCounter().then(function (data) {
     $scope.$storage.counter = data.counter;
    });
    
    $scope.counter = $localStorage.counter;
    $scope.$watch('counter', function(newVal, oldVal) {
     ## 监听变化,并获取参数的最新值
     $log.log('newVal: ', newVal); 
    });
    

    4、基于factory和$rootScope.$broadcast()的传参

    .factory('addressFactory', ['$rootScope', function ($rootScope) {
         var address = {};
         address.components = [];
         // 定义更新地址函数,通过$rootScope.$broadcast()设置全局事件'AddressUpdated'
         // 所有子作用域都能监听到该事件
         address.updateAddress = function (value) {
             this.components = value.slice();
             $rootScope.$broadcast('AddressUpdated');
         };
     return address;
    }]);
    var component = {
         addressLongName: xxxx,
         addressShortName: xxxx,
         cityLongName: xxxx,
         cityShortName: xxxx   
    };
    $scope.components = [];
    $scope.$watch('components', function () {
         components.push(component);
         addressFactory.updateAddress(components);
    });
    
    ## 在监听地址变化的controller中:
    $scope.$on('AddressUpdated', function () {
         var street = address.components[0].addressLongName;
         var city = address.components[0].cityLongName;
     
         shopFactory.getShops(street, city).then(function (data) {
              if(data.status === 200){
                   $scope.shops = data.shops; 
              }else{
                    $log.error('对不起,获取该位置周边商铺数据出错: ', data);
              }
         });
    });
    

    相关文章

      网友评论

        本文标题:Angularjs的页面跳转

        本文链接:https://www.haomeiwen.com/subject/vurjdxtx.html