angularjs页面的跳转与传参

拼搏现实的明天。 2022-05-24 09:51 275阅读 0赞

**方法一：location.href**

第一个界面:布局

<li ng-repeat="remindItemData in remindListData" ng-click="goto(remindItemData)">
     //do somgthing
    </li>

第一个界面:js跳转方法

$scope.goto=function (msg) { 
        var hre = 'remind_info.html?msg=' + angular.toJson(msg);
        //传递对象：先将对象转成字符串（序列化）
        location.href = hre;
    };

第二个界面:js获取参数：

var urlValue='';
    var href = location.href; //取得整个地址栏
    urlValue = href.substr(href.indexOf("=") + 1);
    //此处只有一个参数，先截取参数值（等号后的值）。
    message=angular.fromJson(decodeURI(urlValue));
    //传参会转码，所以先解码，再把字符串string转对象
    
    if(message.picUrl.length>0){
        for (var i = 0; i < message.picUrl.length; i++){
            message.picUrl[i] = decodeURIComponent(message.picUrl[i]);
            //接收的参数在解码转对象时，参数里的MP3或者图片的url未被解码，
            //所以继续decodeURIComponent解码，并重新赋值。
        }
    }

## **方法二：标签a href** ##

第一个界面的布局：

<a href="news_detail.html?id={ { items.id}}" ng-cloak> //do something </a>

第二个界面的js：

var noticeId = "";
    if ($location.search().id) {
        noticeId = $location.search().id;
    }

[angularjs页面带参跳转以及参数解析][angularjs]

// 带#号的url，看？号的url，见下面 
    url = http://qiaole.sinaapp.com?#name=cccccc 
    
    $location.absUrl();  
    // http://qiaole.sinaapp.com?#name=cccccc 
    
    $location.host();  
    // qiaole.sinaapp.com 
    
    $location.port();  
    // 80 
    
    $location.protocol();  
    // http 
    
    $location.url();  
    // ?#name=cccccc 
    
    // 获取url参数 
    $location.search().name;  
    // or 
    $location.search()['name'];  
    
    // 注：如果是这样的地址：http://qiaole.sinaapp.com?name=cccccc 
    
    var searchApp = angular.module('searchApp', []);  
    searchApp.config(['$locationProvider', function($locationProvider) {   
      $locationProvider.html5Mode(true);  
    }]);  
    searchApp.controller('MainCtrl', ['$scope', '$location', function($scope, $location) {   
      if ($location.search().keyword) {  
        $scope.keyword = $location.search().keyword;  
      }  
    }]);

[angularjs]: http://blog.csdn.net/xuexiiphone/article/details/51822962