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;  
  }  
}]);  
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值