发表于: 2017-07-06 23:00:39
1 918
今天完成的事情:
1、学习各种传参方法:【URL】【cookie】【localstorage】【sessionstorage】 和基于angular的传参。
明天计划的事情:
继续任务,学习angular。
遇到的问题:
url传参后怎么获取?简单点的方法?
收获:
1、url传参优点:
URL地址法简洁易用,可同时传递多个字符型参数
URL地址法可以很方便的在页面之间切换并传递参数,无需额外的处理,基于正常情况比较不会性能损失;
2、url传参:
// ==========跳转带参数===========
function go() {
window.location.href='sec.html?name=han&type=2333&师爷=什么是特么的惊喜'
}
3、localstorge传参:
//==========localstorge传参=======
function go() {
location.href='sec.html';
localStorage.name = 'han9999999999';
localStorage.type = 666666666666666;
var myObj = {
big:999,
normal:555,
small:111
};
//
localStorage.myObj = myObj;
localStorage.myObj = JSON.stringify(myObj);
}
4、localstorge接受参数:
// 传对象~~~
console.log(localStorage.myObj);
console.log(typeof (localStorage.myObj));
//
console.log(JSON.parse(localStorage.myObj));
5、cookie传参:
// =============传参========
function go() {
document.cookie = {name:'han',type:222};
location.href='sec.html';
}
6、kookie接受参数:
coooookie
var x = document.cookie;
console.log(typeof x)
console.log(x);
7、关于angular通过路由传参:
第一步:
在html中确定在哪里点击跳转传参:(参数的出发点)
<a type="button" ng-click="tooo(listId)">编辑</a>
第二步:(参数的出发点)
路由中添加参数:(url后边的/:listID就是参数部分,listId是参数,之前的都是固定写法 ,不必纠结,带上参数就行了)
.state('backstage.editArticle',{
url: '/editArticle/:listId', //路由传参!!!!
templateUrl: 'editArticle.html'
})
第三步:(参数的出发点)
控制器中写跳转函数并带参:(注意尖括号部分即是参数)
//示例 传参-------------!!!!!!!!!
$scope.tooo = function (listId) {
$state.go('backstage.editArticle', {listId:77777})
};
第四步:(参数的目的点)
就可以在跳转的页面看到参数并获取:
$scope.aa = $stateParams.listId; //使用$stateParams接受传参
console.log($scope.aa);
此处需要注意要把$stateParams参数添加到function的参数中去:完整的应该是:
//=====>editArticle 页面 控制器(!!!目的页面!!!)
myApp.controller('editArticleCtrl',function ($scope,$http,$stateParams) {
$scope.aa = $stateParams.listId; //使用$stateParams接受传参
console.log($scope.aa);
});
以上
评论