angularjs页面的跳转与传参

方法一: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页面带参跳转以及参数解析

// 带#号的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;  
  }  
}]);  

猜你喜欢

转载自blog.csdn.net/xuehu837769474/article/details/80445417